title: evaluating scope object with a element attribute in AngularJS
body: <p>I'm learning AngularJs. I following this example with a few modification and i dont get it why it does not work.</p>
  
  <p>The example is as follow:</p>
  
  <pre><code>&lt;html ng-app="app"&gt;
  &lt;head&gt;
      &lt;title&gt;Calendar&lt;/title&gt;
      &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src="angular.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          angular.module('app', [])
                  .controller('dayCtrl', dayCtrl)
                  .directive('highlight', highlight);
  
          function dayCtrl ($scope){
              var daysName = ['Sunday', 'Monday', 'Tuesday'];
              $scope.data = {
                  day : daysName[new Date().getDay()],
                  tomorrow : daysName[(new Date().getDay() + 1)]
              };
          }
  
          function highlight () {
              return function (scope, element, attrs){
                  if(scope.day == attrs['highlight']){
                     element.css('color', 'red');
                  }
              }
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row panel" ng-controller="dayCtrl"&gt;
              &lt;div class="col-sm-12 page-header clearfix"&gt;
                  &lt;h4&gt;Angular App&lt;/h4&gt;
              &lt;/div&gt;
              &lt;h4 highlight="Monday"&gt;
                  Today is {{ data.day || 'unknown'}}
              &lt;/h4&gt;
              &lt;h4&gt;
                  Tomorrow is {{ data.tomorrow || 'unknown' }}
              &lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I hope you can help me with this little thing</p>