Update Angular child 1.5 component not working - angularjs

Question

I am using an Angular 1.5 component to build the below structure:
<parent>
<child active="model.active">
<child active="model.active">
<child active="model.active">
</parent>
My component:
(function() {
'use strict'
angular.module('module').component('child',
{
templateUrl: 'template.html',
bindings: {
active: '<'
},
controllerAs: 'model',
controller: function() {
var model = this;
model.select = function() {
model.deselectAllChildren()(model);
model.active = true;
};
}
});
})();
Parent deselectAllChildren method:
model.deselectAllChildren = function(tabModel) {
model.active = false;
};
When a user selects one of the child components, I want it to be made active and the other children inactive. So the logic makes all children inactive (to clean up previous selections) then makes the selected child active. The parent's model.active property is false by default. This works fine for the first select but subsequent selects don't work as the previously selected children don't deselect as the model.active = false change is not propagating to the child components (because the parent's model.active value is still false - but some of the children model.active equals true. This no doubt is a scope/binding issue; I feel like I need to force push model.active = false down to all children. Any ideas?

Answer 1

How about:
<parent>
<child active="model.active === 0" on-select="model.active=0">
<child active="model.active === 1" on-select="model.active=1">
<child active="model.active === 2" on-select="model.active=2">
</parent>
angular.module('module').component('child',
{
templateUrl: 'template.html',
bindings: {
active: '<',
onSelect: '&'
},
controllerAs: 'model',
controller: function() {
var model = this;
model.select = function() {
model.onSelect();
};
}
});