Access $scope variable inside directive template and update controller $scope.variable - angularjs

Question

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 :
angular.module('mapp',[])
.controller('ctrl',['$scope',function($scope){
$scope.total = 0;
}])
.directive('customElement',function(){
return {
restrict: 'E',
scope:{
data: '=info'
},
template: '<input type="text" ng-model="data1">\
<span>{{data1}}</span>'
}
});
I'm looking to sum up data1 of all directives elements and update $scope.total. Here is the HTML code:
<div ng-app="mapp">
<div ng-controller="ctrl">
<custom-element info="a"></custom-element>
<custom-element info="b"></custom-element>
<br/>
<br/> Total: <span>{{total}}</span>
</div>
</div>
Here is a DEMO

Answer 1

Here is a working fiddle
angular.module('mapp', [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.total = 0;
$scope.a = 0;
$scope.b = 0;
$scope.$watchCollection('[a,b]', function () {
console.log('watch');
$scope.total = $scope.a + $scope.b;
});
}])
.directive('customElement', function () {
return {
restrict: 'E',
scope: {
data: '=info'
},
template: '<input type="number" ng-model="data">\
<span>{{data}}</span>'
}
});
A version without $watch
A version with ng-repeat

Answer 2

Total: <span>{{a+b}}</span> this would also work in the html without using a $watch or function from the controller

Answer 3

Here is you can do with $watch
Controller
.controller('ctrl',['$scope',function($scope){
$scope.test = {};
$scope.test.a = 0;
$scope.test.b = 0;
$scope.$watch('test',function(newVal,oldVal){
$scope.total = $scope.test.a + $scope.test.b
},true)
$scope.total = 0;
}])
Directive change ng-model="data1" to ng-model="data"
template: '<input type="number" ng-model="data">\
<span>{{data}}</span>'
Working Fiddle