title: The variable declared using 'this' or "var Vm = this" in controller is not reflecting the value when accessed using directive
body: <p>I am trying out directives in angular. I was trying to use variables with values inside a directive which is declared using <code>this</code> or <code>var Vm = this</code>. But the value of the variable is not showing. </p>
  
  <p>When I try to call the variable inside the directive. This happens when scope: <code>{}</code>is called under the directive declaration.</p>
  
  <p>I am attaching the code of the controller and the directive:</p>
  
  <p><strong>controller (js code)</strong></p>
  
  <pre><code>(function() {
    'use strict';
  
    angular
      .module('serviceApp')
      .controller('ServiceCtrl', ServiceCtrl);
  
    ServiceCtrl.$inject = ['$scope', 'serviceService'];
  
    function ServiceCtrl($scope, serviceService) {
  
      var Vm = this;
  
      Vm.square = function() {
        Vm.result = serviceService.square(Vm.number);
      };
  
      // $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
      // $scope.igor = { name: 'Igor', address: '123 Somewhere' };
    }
  })();
  </code></pre>
  
  <p><strong>directive code</strong></p>
  
  <pre><code>(function() {
    'use strict';
  
    angular
      .module('serviceApp')
      .directive('sampleDir', sampleDir);
  
    function sampleDir() {
      return {
        restrict: 'EA',
        scope: {
  
        },
        templateUrl: "views/directive-template.html"
      };
    }
  })();
  </code></pre>
  
  <p>When I use the result variable under the html template by calling it from the controller, it is displaying the value.</p>
  
  <pre><code>&lt;div ng-controller="ServiceCtrl as ser"&gt;
    &lt;label for="num"&gt;Enter the number:&lt;/label&gt;
    &lt;input type="text" id="num" ng-model="ser.number" ng-keyup="ser.square();"&gt;
    &lt;button&gt;x2&lt;/button&gt;
  
    &lt;p&gt;Result: {{ser.result}}&lt;/p&gt;
  
    &lt;div&gt;
      &lt;sample-dir&gt;&lt;/sample-dir&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>template of directive</p>
  
  <pre><code>&lt;p&gt;Square of the number is &lt;strong&gt;{{ser.result}}&lt;/strong&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Please, any help on this is greatly appreciated.</p>