Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div id="main" ng-controller="MyCtrl">
  <div id="my_dir3" ng-mouseover="myConsole()">three</div>
  <div id="click" ng-click="load()">click</div>
</div>

CSS

div > div {
  margin-top: 10px;
  border: 1px solid #ccc;
  width: 100px;
}

JavaScript

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

myApp.factory('myService', ['$compile', function($compile) {
  return {
    myFunction: function($scope) {
      var myDirective_1 = '<div ng-mouseover="myConsole()">factory_div</div>';
      var compiledDirective_1 = $compile(myDirective_1)($scope.$new());
      angular.element(document.getElementById('main')).append(compiledDirective_1);
    },
    myConsole: function() {
      console.log('factory speaking');
    }

  }
}]);

function MyCtrl($scope, $compile, myService) {

  $scope.load = function() {
    document.getElementById('click').textContent = 'clicked!';
    var myDirective_0 = '<div ng-mouseover="myConsole()">controller_div</div>';
    var compiledDirective_0 = $compile(myDirective_0)($scope.$new());
    angular.element(document.getElementById('main')).append(compiledDirective_0);
    myService.myFunction($scope);
  }

  $scope.myConsole = function() {
    document.getElementById('my_dir3').textContent = 'noted!';
    console.log('my_dir3')
    myService.myConsole();
  }

}