ng-change not firing when switching between ng-includes - angularjs

Question

My domain is such that Bars have Groups. The following code allows the user to pick a Bar (outputted to {{selected.bar.name}}). Users are to choose a Bar.
If a Group only has one Bar then the Bar is presented at the top level (step-0), otherwise the user can drill down into the Group and select the Bar from there (step-1).
In the below code, Bar 1 and Bar 2 are their only ones in their group, whilst Bar 3 and Bar 4 share a group, Group 3.
Everything works well apart from the following sequence:
Select Group 3
Select any Bar
Click Previous
Select any other Bar
Selecting Group 3 again does not take you to step-1 again; the ng-change event is not fired.
(function(ng) {
'use strict';
ng.module('awesome', [])
.controller('BarController', [
'$scope',
function($scope) {
$scope.bars = [{
"id": 1,
"name": "Bar 1",
"group": "Group 1"
}, {
"id": 2,
"name": "Bar 2",
"group": "Group 2"
}, {
"id": 3,
"name": "Bar 3",
"group": "Group 3"
}, {
"id": 4,
"name": "Bar 4",
"group": "Group 3"
}];
$scope.currentTab = 'step-0';
$scope.previousTab = null;
$scope.goBack = function() {
$scope.currentTab = $scope.previousTab;
$scope.previousTab = null;
}
$scope.groupedBars = _.groupBy($scope.bars, 'group');
$scope.selected = {}
$scope.availableGroupedBars = $scope.groupedBars;
$scope.availableBars = $scope.bars;
$scope.groupSelected = function(group) {
console.log('groupSelected');
$scope.currentTab = 'step-1';
$scope.previousTab = 'step-0';
$scope.availableBars = group;
}
}
]);
})(window.angular);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.1/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="awesome">
<div ng-controller="BarController">
<div ng-include="currentTab"></div>
Selected bar name: {{selected.bar.name}}
<button ng-show="previousTab" ng-click="goBack()">Previous</button>
</div>
<script type="text/ng-template" id="step-0">
<ul>
<li ng-repeat="(key, group) in availableGroupedBars">
<label ng-switch="group.length">
<span ng-switch-default>{{key}}</span>
<input ng-switch-default type="radio" name="group" ng-model="selected.group" ng-value="group" ng-change="groupSelected(selected.group)" />
<span ng-switch-when="1">{{group[0].name}}</span>
<input ng-switch-when="1" type="radio" name="group" ng-model="selected.bar" ng-value="group[0]" />
</label>
</li>
</ul>
</script>
<script type="text/ng-template" id="step-1">
<ul>
<li ng-repeat="bar in availableBars">
<label>
{{bar.name}}
<input type="radio" name="bar" ng-model="selected.bar" ng-value="bar" required />
</label>
</li>
</ul>
</script>
</div>
How can I make the ng-change event for Group 3 fire once returning to step-0?

Answer 1

The change event is not fired because nothing changes. You only have one group and that group is still selected when you go back. It stays selected forever, i.e the value of $scope.selected.group never changes, regardless of what radio button you choose.
The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.
I strongly suggest to rethink your approach. If you don't want to then you can add an ng-change to your bars in step-0 and clear $scope.selected.group whenever a bar is selected.
$scope.clearGroup = function() {
$scope.selected.group = null;
};
<input ng-switch-when="1" type="radio" name="group"
ng-model="selected.bar" ng-value="group[0]"
ng-change="clearGroup()" />