title: Access scope controller variable in Directive angular
body: <p>I want to access Scope variable <code>total</code> in directive link property.</p>
  
  <p>Even though total value is updating on mouseDown event was fired, but the $scope.total was not changing.</p>
  
  <p><strong>Here is the code</strong></p>
  
  <p>functionality: Total amount changes when mouse down on respective boxes</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var app = angular.module("billModule", []);
          app.controller("billController", function ($scope) {
              $scope.total = 0.0;
          });
          app.directive("menu", function ($document) {
              return {
                  restrict: "EA",
                  replace: true,
                  link: function (scope, element, attr) {
                      element.on("mousedown", function () {
                          scope.total += Number(attr.cost);
                        //console.log("total is "+ scope.total);
                      });
                  },
                  template: function (element, attr) {
  
                      return "&lt;div class='box' title='$" + attr.cost + "'&gt;" + attr.item + "&lt;/div&gt;";
                  }
              }
          })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
              width: 132px;height: 38px;background-color: red;cursor: pointer;border: groove;text-align: center;padding-top: 5px;font-size: 33px;color: white;
          }
              .box:hover {
                  /*background-color: blue;*/
                  border: inset;
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="billModule"&gt;
          &lt;div ng-controller="billController"&gt;
              &lt;menu item="Gold" cost="20"&gt;&lt;/menu&gt;
              &lt;menu item="fruits" cost="40"&gt;&lt;/menu&gt;
              &lt;menu item="phone" cost="90"&gt;&lt;/menu&gt;
              &lt;menu item="water" cost="50"&gt;&lt;/menu&gt;
              &lt;menu item="monitor" cost="70"&gt;&lt;/menu&gt;
              &lt;div&gt;{{total | currency : '$':2}}&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>