title: How to make $watch function executed in Test?
body: <p>I am implementing a simple directive that represents a form field with all its extras like label, error field, regex all in a single line.</p>
  
  <p>The directive is as follow:</p>
  
  <pre><code> &lt;div ng-controller="parentController"&gt;
  
          {{username}}
  &lt;!-- the directive -- &gt; 
          &lt;form-field label="Username:" regex="someRegex" constrainsViolationMessage="someValidationMessage" model="username" place-holder="some input value"&gt;
          &lt;/form-field&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Now, I want to test the data binding between the directive scope and the parent scope. </p>
  
  <p>The test is: </p>
  
  <pre><code>it("should bind input field to the scope variable provided by parent scope ! ", function () {
          var formInput = ele.find('.form-input');
          formInput.val("some input");
          expect(ele.find('p').text()).toEqual('some input');
      });
  </code></pre>
  
  <p>This problem is that I don't know why test don't pass, even the directive works correctly. <a href="http://jsfiddle.net/Cuya7/22/" rel="noreferrer">Here is a fiddle of the directive.</a> </p>
  
  <p>And here is the whole test and test set up. </p>
  
  <pre><code>var formsModule = angular.module('forms', []);
  
  formsModule.controller('parentController', function ($scope) {
  });
  
  
  formsModule.directive('formField', function () {
  
      var label;
      var constrainsViolationMessage;
      var placeHolder;
      var model;
  
  
      return {
          restrict:'E',
          transclude:true,
          replace:false,
          scope:{
              model:'='
          },
          link:function (scope, element, attr) {
  
              console.log("link function is executed .... ");
  
              scope.$watch('formInput', function (newValue, oldValue) {
                  console.log("watch function is executed .... !")
                  scope.model = newValue;
              });
              scope.label = attr.label;
          },
          template:'&lt;div class="control-group "&gt;' +
  
              '&lt;div class="form-label control-label"&gt;{{label}}&lt;/div&gt; ' +
  
              '&lt;div class="controls controls-row"&gt; ' +
  
              '&lt;input type="text" size="15" class="form-input input-medium" ng-model="formInput"  placeholder="{{placeHolder}}"&gt;' +
  
              '&lt;label class="error" ng-show={{hasViolationConstrain}}&gt;{{constrainsViolationMessage}}&lt;/label&gt;' +
  
              '&lt;/div&gt;'
      }
  });
  
  
  beforeEach(module('forms'));
  
  var ele;
  
  var linkingFunction;
  
  var elementBody;
  
  
  var scope;
  var text = "";
  var placeHolder = "filed place holder";
  var label = "someLabel";
  var regex = "^[a-z]{5}$";
  
  
  beforeEach(inject(function ($compile, $rootScope) {
  
          scope = $rootScope;
  
  
          elementBody = angular.element('&lt;div ng-controller="parentController"&gt;' +
              '&lt;p&gt;{{username}}&lt;/p&gt;' +
              '&lt;form-field label="Username:" regex="someRegex" constrainsViolationMessage="someValidationMessage" model="username" place-holder="some input value"&gt; &lt;/form-field&gt;');
  
          ele = $compile(elementBody)(scope);
          scope.$digest();
      }
  ));
  
  
  afterEach(function () {
      scope.$destroy();
  });
  
  
  iit("should bind input field to the scope variable provided by parent scope ! ", function () {
      var formInput = ele.find('.form-input');
      formInput.val("some input");
      expect(ele.find('p').text()).toEqual('some input');
  });
  </code></pre>
  
  <p>As you can see, I want to assert that form input is reflected in the scope variable set in the 'model' attribute provided by the parent scope.  </p>
  
  <p>Am I missing something here ? 
  Thanks for helping me ... ! </p>