title: AngularJS : Directive Isolated Scope Undefined
body: <p>I am writing a directive with an <code>isolate scope</code> with a two-way binding in <code>AngularJS</code>. However, I cannot seem to get the two-way binding to work. No matter what I do, the <code>populate</code> property on the <code>isolate scope</code> is always <code>undefined</code> (although the property does exist) instead of being the value it's supposed to be bound to.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body ng-app="MyApp"&gt;
      &lt;div ng-controller="MyController"&gt;
        {{data.dataProp}} &lt;!-- demonstrates that data.dataProp is defined --&gt;
        &lt;scope-fail data-source="data.dataProp"&gt;&lt;/scope-fail&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>angular.module("MyApp", [])
  .controller('MyController', function ($scope) {
    $scope.data = {
      dataProp: 'Some Data'
    }
  })
  .directive('scopeFail', function ($window) {
    return {
      restrict: 'E',
      scope: {
        populate: '=dataSource'
      },
      template: '&lt;div&gt;Value: {{populate}}&lt;/div&gt;',
      link: function (scope, element, attrs) {
        console.log('Scope property:', scope.populate); //prints Scope property: undefined
      }
    };
  })
  </code></pre>
  
  <p>CodePen with above code: <a href="http://codepen.io/anon/pen/rVKMaJ" rel="nofollow">CodePen link</a></p>
  
  <p>So why doesn't the CodePen show "Value: Some Data"? What I think is supposed to happen is that <code>populate</code> binds to the value of <code>data-source</code> on the custom element which is <code>data.dataProp</code> on the controller scope which is <code>Some Data</code>.</p>
  
  <p>Where am I going wrong with this/how can I get the isolate scope to have a two-way binding with the data-source attribute?</p>
  
  <p>Thank you so much</p>