Angularjs directive, two way binding does not bind

All,

My understand of angularjs when it comes to directives is that when you have an isolate scope setup like so:

scope: {
  dataSource: '='
}

that inside the link function: function(scope, ele, attr)

the scope would have a dataSource property which is bound to name on my controller if used like this:

<my-element data-source='name'></my-element>

However this isn't the case, here is an example:

http://jsfiddle.net/HB7LU/21879/

Thanks

Steve

Change the name of scope property dataSource to source. Because data is reserved name.

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function($scope) {
  $scope.name = 'Batman';
})

.directive('myElement', function() {
  return {
    template: '<div>Hello {{source}}</div>',
    replace: true,
    restrict: 'E',
    scope: {
            source: '='
    },
    link: function(scope, ele, attr) {
            console.log(scope.source);
    }
  }

})

Code Fiddle