title: Angular directive, detect change with ng-model
body: <p>I'm using AngularJS 1.2</p>
  
  <p>I'm passing an array via <code>ng-model</code> into a custom directive.</p>
  
  <p>The data is in the directive when it is loaded, but when changes are made to the model in the main controller, the model in the directive isn't updating.</p>
  
  <p>This is the relative partial my controller uses. (not the directive controller) <code>ui.pct</code> is an array of percentages.</p>
  
  <p><code>
  &lt;dprogress ng-model="ui.pct"&gt;&lt;/dprogress&gt;
  </code></p>
  
  <p>Here's the directive:
  ```
  angular.module('dprogress', [])
    .directive('dprogress', function () {</p>
  
  <pre><code>function makeChart(data) {
    var chart = d3.select('#chart')
      .append("div").attr("class", "chart")
      .selectAll('div')
      .data(data)
      .enter()
      .append("div")
      .style("width", function(d) { return d + "%"; })
      .text(function(d) { return d + "%"; });
  }
  
  return {
    restrict: 'E',
    scope: { data: "=ngModel" },
    template: '&lt;div id="chart"&gt;&lt;/div&gt;',
    link: function (scope, element, attrs) {
      makeChart(scope.data);
    }
  };
  </code></pre>
  
  <p>});
  ```</p>
  
  <p>I've added <code>scope.$watch('data')</code> in the link, but it would not trigger when the data was being changed from outside the directive.</p>
  
  <p>How can I update the data in my directive when it is changed from outside?</p>