title: Access $scope variable inside directive template and update controller $scope.variable
body: <p>I have create a simple directive with an input element and span. Using the directive I created two custom elements with isolate scope. Now, I am trying to get the sum of the data entered in the input element of the directive. But really can't figure out how to do that.
  Here is the my controller and directive :</p>
  
  <pre><code>angular.module('mapp',[])
  
  .controller('ctrl',['$scope',function($scope){
      $scope.total = 0;  
  }])
  
  .directive('customElement',function(){
      return {
          restrict: 'E',
          scope:{
              data: '=info'
          },
          template: '&lt;input type="text" ng-model="data1"&gt;\
                      &lt;span&gt;{{data1}}&lt;/span&gt;'
      }
  });
  </code></pre>
  
  <p>I'm looking to sum up <code>data1</code> of all directives elements and update <code>$scope.total</code>. Here is the HTML code:</p>
  
  <pre><code>&lt;div ng-app="mapp"&gt;
      &lt;div ng-controller="ctrl"&gt;
  
          &lt;custom-element info="a"&gt;&lt;/custom-element&gt;
          &lt;custom-element info="b"&gt;&lt;/custom-element&gt;
          &lt;br/&gt;
          &lt;br/&gt; Total: &lt;span&gt;{{total}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/npodupn8/1/" rel="noreferrer">DEMO</a></p>