title: Directive is not working?
body: <p>we set restrict AE in directive part. In html i tired this below code.It is not working.</p>
  
  <pre><code>&lt;hello-world&gt;
      &lt;input type="text" ng-model="color" placeholder="Enter a color" /&gt;
   &lt;/hello-world&gt; .
  </code></pre>
  
  <p>but i tried below code.it is working fine.</p>
  
  <pre><code>&lt;input type="text" ng-model="color" placeholder="Enter a color" /&gt;
    &lt;/hello-world&gt;.
  </code></pre>
  
  <p>What is the difference between above codes of directive.Below Is my directive code.</p>
  
  <pre><code>app.directive('helloWorld', function() {
    return {
      restrict: 'AE',
      replace: true,
      template: '&lt;p style="background-color:{{color}}"&gt;Hello World',
      link: function(scope, elem, attrs) {
        elem.bind('click', function() {
          elem.css('background-color', 'red');
          scope.$apply(function() {
            scope.color = "red";
          });
        });
        elem.bind('mouseover', function() {
          elem.css('cursor', 'pointer');
        });
      }
    };
  });
  </code></pre>