title: Angular Directive function call on ng-change
body: <p>I have an angular-bootstrap modal popup box that contains a custom directive in the template:</p>
  
  <h2>Modal.html</h2>
  
  <pre><code>&lt;div class="modal-header"&gt;
      &lt;h3 class="modal-title"&gt;Modal Header&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;my-directive ng-model="test" ng-change="doSomething()" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;button class="btn btn-primary" ng-click="upload()"&gt;Upload&lt;/button&gt;
      &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>ModalCtrl.js</h2>
  
  <pre><code>app.controller('ModalCtrl', function ModalCtrl( $scope, $modalInstance ) {
      $scope.test = 'empty';
  
      $scope.upload = function() {
          $scope.test = 'change!';
      };
  
      $scope.cancel = function() {
          $modalInstance.dismiss('cancel');
      };
  });
  </code></pre>
  
  <p>I open the modal popup from my main controller like this:</p>
  
  <h2>MainCtrl.js</h2>
  
  <pre><code>var app = angular.module( 'myApp', [ 'ui.bootstrap' ] );
  
  app.controller('MainCtrl', function MainCtrl( $scope, $modal ) {
      $scope.openModal = function() {
          var modalInstance = $modal.open({
              templateUrl: '/assets/modals/Modal.html',
              controller: 'ModalCtrl',
              size: 'md'
          });
      };
  });
  </code></pre>
  
  <p>As you can see from the above code, the modal template contains my custom directive <code>&lt;my-directive&gt;</code> which takes <code>$scope.test</code> - defined in the <code>ModalCtrl</code> - as it's model and should call <code>$scope.doSomething()</code> when that model changes.</p>
  
  <p>The custom directive looks like this:</p>
  
  <h2>MyDirective.js</h2>
  
  <pre><code>angular.module( 'myApp' ).directive( 'myDirective', function() {
      return {
          controller: function( $scope ) {
              $scope.doSomething = function() {
                  console.log( 'doSomething() called! $scope.test now = ' + $scope.test );
              };
          },
  
          link: function( $scope, el, att ) {
              console.log( '$scope.test = ' + $scope.test );
          },
  
          template: '&lt;div class="thumbnail"&gt;&lt;/div&gt;'
      };
  } );
  </code></pre>
  
  <p>When the modal popup opens the console prints out <code>$scope.test = empty</code> which is exactly what I expect to see. But when <code>$scope.test</code> is changed by calling the <code>$scope.upload()</code> function in <code>ModalCtrl</code> nothing happens! What I think should happen is <code>$scope.doSomething()</code> is called which then should print out in the console <code>doSomething() called! $scope.test now = change!</code>.</p>
  
  <p>Any help would be much appreciated, this is driving me mad!</p>