Currently, I have set up a md-tabs configuration, which is bound to $scope.selectedIndex for the purpose of being able to change it programmatically.
The process involves using a button to trigger a function that updates data. Subsequently, I modify $scope.selectedIndex to the desired tab number (in this case 3), leading to a change in the selected tab.
While everything seems to be working well, there is an issue where $scope.selectedIndex is being called before the completion of the .forEach() method, causing a ng-repeat not to function properly as it exits silently without any errors due to being undefined.
Button Commands:
ng-click="initTVShow(show)"
Function:
$scope.initTVShow = function(show) {
var rng = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 10; i++ )
rng += possible.charAt(Math.floor(Math.random() * possible.length));
$scope.show = show;
$scope.show_name = show.title.split(' ').join('') + "-" + rng;
$scope.poster = show.images.poster;
$scope.backdrop = show.images.poster;
$scope.seasons = [{},{}];
getShow(show.imdb_id, function (err, show) {
for (let i = 0; i < 10; i++) {
$scope.seasons[i] = show.episodes.filter((episode) => episode.season === i);
}
});
$scope.selectedIndex=3;
};
In essence, $scope.selectedIndex=3; results in the switch to Tab #4 (0-based).
Consequently, the subsequent ng-repeat operation fails to execute properly, likely due to the incomplete execution of .forEach(). Testing with $scope.seasons containing 2 empty indices confirms functionality.
<span ng-repeat="season in seasons">{{season.number}}</span>