title: Why is scope.$watch not triggered when a value is set via $parse assign in Angular?
body: <p>I have two directives. One directive show a dropdown and the other directive must hide the dropdown when somewhere else on the page is clicked.</p>
  
  <p>dropdown directive:</p>
  
  <pre><code>app.directive('dropdown', function ($parse) {
      return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              scope.$watch(attrs.ngShow, function (newVal, oldVal) {
  
                  obj = angular.element(document.getElementById(attrs.dropdown));
                  if (newVal) {
  
                      // hide all drodowns with this attribute                    $(document).find('[dropdown]').each(function (index) {
                      if ($(this).is(':visible')) {
                          var attrValue = $(this).attr('ng-show');
                          var model = $parse(attrValue);
  
                          model.assign(scope, false);
                      }
                  });
              var offset = obj.offset();
              var new_top = offset.top + 30;
              var right = offset.left + obj.outerWidth() - element.width() + 10;
  
              element.css('left', right + 'px');
              element.css('top', new_top + 'px'); angular.element(element.children()[0]).css('margin-left', element.width() - 30 + 'px');
              element.show('size', {
                  origin: ["top", "right"]
              }, 100);
              }
          });
  }
  }
  });
  </code></pre>
  
  <p>hide dropdown directive:</p>
  
  <pre><code>app.directive('hideAllPopups', function ($parse) {
      return {
          link: function (scope, element, attrs) {
              $(document).mouseup(function (e) {
  
                  $(document).find('[dropdown]').each(function (index) {
  
                      if ($(this).is(':visible')) {
                          var attrValue = $(this).attr('ng-show');
                          var model = $parse(attrValue);
  
                          model.assign(scope, false);
                      }
                  });
              });
          }
      };
  });
  </code></pre>
  
  <p>The latter directive isn't working. What I want to achieve is that when there is click event outside the dropdown, the dropdown must hide.</p>
  
  <p>Showing the dropdown works with this code, but the dropdown never hides anymore and I can't figure out why. So what do I have to do to get my 'hide all dropdowns' get to work?</p>
  
  <p><a href="http://jsfiddle.net/martijngr/ADukg/3063/" rel="nofollow">fiddle</a></p>