title: Using One-Way Binding in AngularJS Directive
body: <p>I have a directive defined like this:</p>
  
  <pre><code>myApp.directive('stoplight', function() {
      return {
          restrict:'E',
          transclude: true,
          scope: {
              value: '@'
          }, 
          link: function(scope, element) {
              if (scope.value === true) {
                  element.html('&lt;i class="icon icon-true green"&gt;&lt;/i&gt;');
              } else if (scope.value === false) {
                  element.html('&lt;i class="icon icon-false red"&gt;&lt;/i&gt;');
              } else {
                  element.html('&lt;i class="icon icon-unknown yellow"&gt;&lt;/i&gt;');
              }
          }
      };
  });
  </code></pre>
  
  <p>When I use this directive, I use the following markup:</p>
  
  <pre><code>&lt;stoplight value="boolValue" /&gt;
  </code></pre>
  
  <p>My controller behind stoplight looks like this:</p>
  
  <pre><code>myApp.controller('MyController', function($scope, $http) {
      $scope.boolValue = null;
      $scope.init = function() {
        $scope.boolValue = false;
        $http.jsonp('http://anyorigin.com/get?url=www.google.com&amp;callback=JSON_CALLBACK')
          .success(function() {
              console.log('woohoo!');
              $scope.boolValue = true;
          });
      };
  
      $scope.init();
  }};
  </code></pre>
  
  <p>I have two issues, and neither make sense to me. </p>
  
  <ol>
  <li>The '<code>@</code>' in my directive doesn't work. If I change the '<code>@</code>' to a '<code>=</code>', the link function works somewhat as expected. However, I want to use one-way binding instead of two-binding for performance reasons.</li>
  <li>For some reason, the <code>$scope.boolValue = true;</code> in my success callback doesn't update the UI. The icon stays red. I can set the value to null, expecting yellow, but it stays red. If I look in the console window though, I can see '<code>woohoo!</code>'. I don't understand why updating <code>boolValue</code> outside of the callback works, yet in the callback, it just doesn't work. I do not see any error in the console window or anything of that nature.</li>
  </ol>
  
  <p>Can someone please help me identify why this isn't working? I'm not sure if this is one issue or two issues. I think they both have to do with the binding. However, I'm not sure how to remedy this.</p>
  
  <p>Thank you.</p>