title: Angular Custom directive change attribute value
body: <p>Struggling to find out the best way to watch for attribute changes, which would ideally update based on a keypress event, bound to the scope in the parent controller</p>
  
  <p>I would like each 'instance' of the directive to have its own 'hasFocus' property to be changed by updating the attribute value
  e.g.</p>
  
  <pre><code>&lt;menu has-focus="{{ true }}" &gt;&lt;/menu&gt;
  &lt;menu has-focus="{{ false }}" &gt;&lt;/menu&gt;
  &lt;menu has-focus="{{ false }}" &gt;&lt;/menu&gt;
  </code></pre>
  
  <p>template:</p>
  
  <pre><code>&lt;div class="menu"&gt;
  &lt;ul&gt;
      &lt;li ng-repeat="option in menu.options" ng-class="{ 'focused' : hasFocus  }" tabindex="{{ $index }}"&gt;
          &lt;div class="icon"&gt;{{ $index+1 }}&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>and so only 1 directive can have the value equal to 'true' at any one time.</p>
  
  <p>I have a custom directive</p>
  
  <pre><code>.directive('menu', function()
  {
    restrict : 'E',
    templateUrl : 'partials/menu-left.html',
    replace : true,
    scope : {
          hasFocus : '@'
    },
    link : function( $scope, element, attrs )
    {
      attrs.$observe('hasFocus', function(value) {
          console.log(value);
       });
    }
  
  }) 
  </code></pre>
  
  <p>but cant seem to extract the value from the $observe method
  tried using $watch but still didnt work
  not sure what I am doing wrong!</p>