The variable declared using 'this' or "var Vm = this" in controller is not reflecting the value when accessed using directive
<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>