title: directive with service not working, updated value is not shown on UI
body: <p>I am trying to create a directive ('showLatestValue') which could be written as follows in HTML .</p>
  
  <p>Here is the <a href="http://jsfiddle.net/r8cohrm4/" rel="nofollow">jsFiddle</a></p>
  
  <pre><code>&lt;div ng-app='myApp'&gt;
      &lt;div ng-controller="testController"&gt;
          &lt;input type="button" value="Hit It" ng-click="SetIt()" /&gt;  
      &lt;/div&gt;
     &lt;show-latest-value&gt;&lt;/show-latest-value&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this directive will make use of a service. Following is the code I am experimenting with. I am not sure why the updated value is not shown when i click the button.</p>
  
  <pre><code>var myApp = angular
      .module("myApp", []);
  
  myApp.controller('testController',['$scope','latestValueService',function($scope,lvs){
          $scope.SetIt = function(){
              lvs.setValue('Updated Value');
          };
          $scope.firstName = "prerak";
      }]);
  
  myApp.service('latestValueService', [function () {
          var latestValue = 'Init';
          this.setValue = function (newValue) {
              latestValue= newValue;
          }
          this.currentVal = function(){
              return latestValue;
          }
       }]);
  
  myApp.directive('showLatestValue', ['latestValueService',function (lvs) {
          return {
              restrict: 'E',
              template:'&lt;label&gt;This is the current value {{valueRightNow}}&lt;/label&gt;',
              link: function (scope, element, attrs) {
                  scope.valueRightNow  = lvs.currentVal();
              }
          }
  }]);
  </code></pre>