angular.module("app", []) .directive("vehicle", function(){ return { restrict: "E", controller: function($scope){ var self = this; self.totalPassenger = 0; self.loadPassenger = function(count){ self.totalPassenger += count; } $scope.totalPassenger = function(){ return self.totalPassenger; } } } }) .directive("bus", function(){ return { restrict: "E", require: "^vehicle", scope: {}, link: function(scope, element, ettributes, vehicleController) { scope.dailyPassengersCount = 0; setInterval(function(){ scope.$apply(function(){ var loadedPassengers = Math.floor((Math.random() * 15) + 1) scope.dailyPassengersCount += loadedPassengers; vehicleController.loadPassenger(loadedPassengers); }) }, 2000); }, template: '<span>Bus Total Passengers: {{dailyPassengersCount}}</span>' } }) .directive("car", function(){ return { restrict: "E", require: "^vehicle", link: function(scope, element, ettributes, vehicleController) { scope.dailyPassengersCount = 0; setInterval(function(){ scope.$apply(function(){ var loadedPassengers = Math.floor((Math.random() * 4) + 1); scope.dailyPassengersCount += loadedPassengers; vehicleController.loadPassenger(loadedPassengers); }) }, 1500); }, template: '<span>Car Total Passengers: {{dailyPassengersCount}}</span>' } })
<div ng-app="app"> <vehicle> <bus></bus><br/><br/> <car></car><br/><br/> Daily Total Passengers: {{totalPassenger()}} </vehicle> </div>