JSFiddle - React, Tailwind, and code Playground

HTML

<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>

JavaScript

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>'
    }
});