title: Data-binding in a directive template
body: <p>I'm trying to build a really basic <strong>Angular directive</strong> that generates a "div" that can have two states: "on" and "off".</p>
  
  <p>I've naively come up with an implementation that you can find here: <a href="http://jsfiddle.net/wSz2f/" rel="nofollow">http://jsfiddle.net/wSz2f/</a></p>
  
  <p>The initial display is correct but the visual state is not updated when the scope state changes.</p>
  
  <p>Here is the Angular directive definition:</p>
  
  <pre><code>var test = angular.module("test", []);
  test.directive("led", function()
  {   
      return {
          restrict: "E",
          replace: true,
          template: "&lt;div class='led led-off' ng-class='{ \"led-on\": isOn }'&gt;{{isOn}}&lt;/div&gt;",
          link: function(scope, element, attributes, controller)
          {
              scope.isOn = false;
  
              element.bind("click", function()
              {
                  scope.isOn = !scope.isOn;
              });
          }
      };
  });
  </code></pre>
  
  <p>I guess I'm doing something stupid but what...?</p>
  
  <p>Moreover, in term of design, am doing it the "Angular way" or is there better practices?</p>
  
  <p>Thanks for any input. :)</p>
  
  <hr>
  
  <p><strong>Final edit:</strong></p>
  
  <p>Thanks to <em>Mark</em>, <em>Bertrand</em> and <em>James</em> for their input:</p>
  
  <ul>
  <li>you have to either call <strong><em>scope.$apply()</em></strong> after updating the "isOn" property to make <strong>Angular</strong> aware of its change (thinking about it this is how it works too in other frameworks like WPF/Silverlight with the INotifyPropertyChanged interface, but not in Flex with all its magic binding) or use <strong>ng-click</strong> like suggested by <em>Bertrand</em></li>
  <li>you have to provide "<strong>ng-class</strong>" a condition for each CSS class</li>
  </ul>