Return to Answer

I think the AngularJs way of doing this would be accomplished with implementing an output in the child directive. Every time the "states" object changes the child calls the output function and the parent can do whatever it wants with it.

HTML

<parent-directive> <child-directive on-state-change="$ctrl.stateChange($stateChangeObj)"></child-directive> </parent-directive> 

Child Controller

 $scope.$watch('$ctrl.state', function(n, old){ ctrl.onStateChange({$stateChangeObj: n}); }) 

Parent Controller

ctrl.stateChange = function(state){ // do something } 

https://docs.angularjs.org/guide/component#component-based-application-architecture

Note: Component based architecture was introduced in AngularJS v1.5.

this should technically work the same with a two way bound function. except the html would look like this

on-state-change="$ctrl.stateChange" 

instead of

on-state-change="$ctrl.stateChange($stateChangeObj)" 

. then in the child it would be

ctrl.onStateChange(n); 

instead of

 ctrl.onStateChange({stateChangeObj: n}); 

I think the AngularJs way of doing this would be accomplished with implementing an output in the child directive. Every time the "states" object changes the child calls the output function and the parent can do whatever it wants with it.

AngularJS v1.5+ Method:

HTML

<parent-directive> <child-directive on-state-change="$ctrl.stateChange($stateChangeObj)"></child-directive> </parent-directive> 

Child Controller

 $scope.$watch('$ctrl.state', function(n, old){ ctrl.onStateChange({$stateChangeObj: n}); }) 

Parent Controller

ctrl.stateChange = function(state){ // do something } 

https://docs.angularjs.org/guide/component#component-based-application-architecture

Note: Component based architecture was introduced in AngularJS v1.5.

Prior to AngularJS v1.5 Method:

this should technically work the same with a two way bound function. except the html would look like this

on-state-change="$ctrl.stateChange" 

instead of

on-state-change="$ctrl.stateChange($stateChangeObj)" 

. then in the child it would be

ctrl.onStateChange(n); 

instead of

 ctrl.onStateChange({stateChangeObj: n}); 

I think the AngularJs way of doing this would be accomplished with implementing an output in the child directive. Every time the "states" object changes the child calls the output function and the parent can do whatever it wants with it.

HTML

<parent-directive> <child-directive on-state-change="$ctrl.stateChange(stateChangeObj)"></child-directive> </parent-directive> 

Child Controller

 $scope.$watch('$ctrl.state', function(n, old){ ctrl.onStateChange({stateChangeObj: n}); }) 

Parent Controller

ctrl.stateChange = function(state){ // do something } 

https://docs.angularjs.org/guide/component#component-based-application-architecture

Note: Component based architecture was introduced in AngularJS v1.5.

this should technically work the same with a two way bound function. except the html would look like this

on-state-change="$ctrl.stateChange" 

instead of

on-state-change="$ctrl.stateChange(stateChangeObj)" 

. then in the child it would be

ctrl.onStateChange(n); 

instead of

 ctrl.onStateChange({stateChangeObj: n}); 

I think the AngularJs way of doing this would be accomplished with implementing an output in the child directive. Every time the "states" object changes the child calls the output function and the parent can do whatever it wants with it.

HTML

<parent-directive> <child-directive on-state-change="$ctrl.stateChange($stateChangeObj)"></child-directive> </parent-directive> 

Child Controller

 $scope.$watch('$ctrl.state', function(n, old){ ctrl.onStateChange({$stateChangeObj: n}); }) 

Parent Controller

ctrl.stateChange = function(state){ // do something } 

https://docs.angularjs.org/guide/component#component-based-application-architecture

Note: Component based architecture was introduced in AngularJS v1.5.

this should technically work the same with a two way bound function. except the html would look like this

on-state-change="$ctrl.stateChange" 

instead of

on-state-change="$ctrl.stateChange($stateChangeObj)" 

. then in the child it would be

ctrl.onStateChange(n); 

instead of

 ctrl.onStateChange({stateChangeObj: n}); 

I think the AngularJs way of doing this would be accomplished with implementing an output in the child directive. Every time the "states" object changes the child calls the output function and the parent can do whatever it wants with it.

HTML

<parent-directive> <child-directive on-state-change="$ctrl.stateChange(stateChangeObj)"></child-directive> </parent-directive> 

Child Controller

 $scope.$watch('$ctrl.state', function(n, old){ ctrl.onStateChange({stateChangeObj: n}); }) 

Parent Controller

ctrl.stateChange = function(state){ // do something } 

https://docs.angularjs.org/guide/component#component-based-application-architecture

Note: Component based architecture was introduced in AngularJS v1.5.

I think the AngularJs way of doing this would be accomplished with implementing an output in the child directive. Every time the "states" object changes the child calls the output function and the parent can do whatever it wants with it.

HTML

<parent-directive> <child-directive on-state-change="$ctrl.stateChange(stateChangeObj)"></child-directive> </parent-directive> 

Child Controller

 $scope.$watch('$ctrl.state', function(n, old){ ctrl.onStateChange({stateChangeObj: n}); }) 

Parent Controller

ctrl.stateChange = function(state){ // do something } 

https://docs.angularjs.org/guide/component#component-based-application-architecture

Note: Component based architecture was introduced in AngularJS v1.5.

this should technically work the same with a two way bound function. except the html would look like this

on-state-change="$ctrl.stateChange" 

instead of

on-state-change="$ctrl.stateChange(stateChangeObj)" 

. then in the child it would be

ctrl.onStateChange(n); 

instead of

 ctrl.onStateChange({stateChangeObj: n});