title: $watch does not fire when changing $scope property
body: <p>I have doubts I've done something wrong or I just do not understand. Whats wrong in my directive?</p>
  
  <pre><code>app.directive('sideMenu', function() {
      return {
          restrict: 'E',
          templateUrl : '/app/components/sidemenu/side-menu.html',
          controller: ['$scope', function SideMenuController($scope) {
              $scope.sidebarState = false;
  
              this.toggleSideBar = function() {
                  $scope.sidebarState = !$scope.sidebarState;
              };  
          }],
          controllerAs: "sideMenuCtrl",
          link: function(scope, elem, attr) {
              scope.$watch(attr.sidemenuDirective, function(newVal) {
                  console.log(scope);
              }); 
          }
      };
  });
  
  
  &lt;nav class="side-menu" sidemenu-directive="sidebarState"&gt;
  
  &lt;div class="side-menu-controls"&gt;
  
      &lt;a class="active toggle-menu" href="#" ng-click="sideMenuCtrl.toggleSideBar()"&gt;
          &lt;span class="hb"&gt;
              &lt;em&gt;&lt;/em&gt;
              &lt;em&gt;&lt;/em&gt;
              &lt;em&gt;&lt;/em&gt;
          &lt;/span&gt;
      &lt;/a&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="side-menu-inner" ng-controller="TasklistController as tasklistCtrl"&gt;
  
      &lt;div class="items-menu"&gt;
          &lt;ul&gt;
              &lt;li ng-class="{active: tasklistCtrl.isSelected(list)}" ng-repeat="list in taskLists"&gt;
                  &lt;a ng-click="tasklistCtrl.selectList(list)"&gt;{{list.name}}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;body class="expanded"&gt;
      &lt;side-menu&gt;&lt;/side-menu&gt;
  &lt;/body&gt;
  </code></pre>