AngularJS Directive

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Directive</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
  <script src="script.js"></script>
</head>

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

</html>

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  
});

app.directive('helloWorld',function(){
  return{
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World</p>',
    link: function(scope,elem,attrs){
  
      elem.bind('mouseover',function(){
        elem.css('cursor','pointer');
        elem.css('background-color','white');
        scope.$apply(function(){
          scope.color="white";
        });
      });
    }
  }
});

/* Styles go here */