title: AngularJS directive not reacting to attribute change
body: <p>I have a chat directive that I use to place a chatroom on the page.</p>
  
  <pre><code>mod.directive('chat', function () {
    return {
      templateUrl: '/chat',
      replace: true,
      scope: { 
        chatID:'@chat',
      },
      controller: function ($scope, $element, $timeout) {
        var id = $scope.chatID
        ...
      },
      link: function ...
    }
  })
  </code></pre>
  
  <p>HTML looks like this:</p>
  
  <pre><code>&lt;div class="chat" chat="{{currentChatID}}" ui-view="currentChat"&gt;&lt;/div&gt;
  &lt;div class="content" ui-view="mainContent"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is in a file called "standard"</p>
  
  <pre><code>mod.config(function($stateProvider) {
    $stateProvider.state('standard', {
      views: {
        'main': {
          templateUrl: '/tmpl/standard',
          controller: function($scope, $timeout) {
            $scope.currentChatID = ''
            $scope.setCurrentChatID = function(newID) {
              $scope.currentChatID = newID
            }
          }
        }
      }
    })
  })
  </code></pre>
  
  <p>I'm using angularjs-ui-router to create a parent view with the chat directive providing a chat inside that view. This works fine on first page load, the chat loads up. But when I change the page/chat room, I use another controller to run <code>setCurrentChatID()</code>. This changes the <code>currentChatID</code> for the chat element in the DOM, I also see the chat element's properties change to the new ID in angularjs-batarang but the chat directive's controllers do not run. How do I get this to work properly / activate the chat's controllers when the chatID changes?</p>
  
  <p>Thanks. </p>