Directive is not working?

we set restrict AE in directive part. In html i tired this below code.It is not working.

<hello-world>
    <input type="text" ng-model="color" placeholder="Enter a color" />
 </hello-world> .

but i tried below code.it is working fine.

<input type="text" ng-model="color" placeholder="Enter a color" />
  </hello-world>.

What is the difference between above codes of directive.Below Is my directive code.

app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">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');
      });
    }
  };
});