title: watch ng-model inside directive
body: <p>I have the following directive:</p>
  
  <pre><code>directive('myInput', function() {
      return {
          restrict: 'AE',
          scope: {
              id: '@',
              label: '@',
              type: '@',
              value: '='
          },
          templateUrl: 'directives/dc-input.html',
          link: function(scope, element, attrs) {
              scope.disabled = attrs.hasOwnProperty('disabled');
              scope.required = attrs.hasOwnProperty('required');
              scope.pattern = attrs.pattern || '.*';
          }
      };
  });
  </code></pre>
  
  <p>with the following template:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label for="input-{{id}}" class="col-sm-2 control-label"&gt;{{label}}&lt;/label&gt;
      &lt;div class="col-sm-10" ng-switch on="type"&gt;
          &lt;textarea ng-switch-when="textarea" ng-model="value" class="form-control" id="input-{{id}}" ng-disabled="disabled" ng-required="required"&gt;&lt;/textarea&gt;
          &lt;input ng-switch-default type="{{type}}" ng-model="value" class="form-control" id="input-{{id}}" ng-disabled="disabled" ng-required="required" pattern="{{pattern}}"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It is used by this form:</p>
  
  <pre><code>&lt;form ng-controller="UserDetailsCtrl" role="form" class="form-horizontal"&gt;
      &lt;div ng-show="saved" class="alert alert-success"&gt;
          The user has been updated.
      &lt;/div&gt;
      &lt;my-input label="First name" value="user.firstName" id="firstName"&gt;&lt;/my-input&gt;
      &lt;my-input label="Last name" value="user.lastName" id="lastName"&gt;&lt;/my-input&gt;
      &lt;my-input label="Email" value="user.email" id="email" type="email" disabled&gt;&lt;/my-input&gt;
      &lt;my-input label="Password" value="user.password" id="password" type="password"&gt;&lt;/my-input&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-sm-offset-2 col-sm-10"&gt;
              &lt;button ng-click="update()" class="btn btn-default"&gt;Save&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Which has this controller:</p>
  
  <pre><code>controller('UserDetailsCtrl', function($scope, $stateParams, User) {
      $scope.user = User.get({userId: $stateParams.id});
      /**
       * Update the current user in this scope.
       */
      $scope.update = function() {
          console.log($scope.user);
          $scope.user.$update({userId: $scope.user.id}).then(function(results) {
              $scope.saved = true;
          });
      };
  }).
  </code></pre>
  
  <p>The form is rendered fine, but when I click the <code>Save</code> button, the user values are never updated.</p>
  
  <p>How can I use the updated values from within the myInput directive in the controller scope?</p>