Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<div>
  <output></output>  
</div>
<hr/>

JavaScript

var app = angular.module('myApp', []);
app.factory('MyService', ['$q', '$timeout', function($q, $timeout) {
  return {
    getData:function() {
      return $timeout(function(){
      	return $q.when({some:'data'});
      }, 1000); 
    }
  };
}]);
app.directive('output', function() {
  return {
    retrict:'E',
    replace:true,
    template:'<pre>[{{MyData | json}}]</pre>',
    scope:true,
    controller:function(MyService, $scope) {
      $scope.MyData = $scope.MyData || {};
      MyService.getData().then(function(value){
      	$scope.MyData.value = value;
      });
    },
    link:function(scope, element, attrs) {
      scope.MyData = scope.MyData || {};
    }
  };
});