angularjs - Angular Material - Dynamically add tab and change to that tab -

currently working on chat app here https://playwithfire.firebaseapp.com/ , whenever user adds new room want new room tab entered. can add room need click afterwards enter room , display content.

i tried changing attribute md-selected="selectedindex" makes no tab active no content appears.

is possible i'm asking for? i've got far:

index.html

<div layout="column" ng-controller="roomcontroller">         <!-- tabs container -->         <md-tabs md-stretch-tabs md-selected="selectedindex">             <!-- individual tab -->             <md-tab ng-repeat="room in roomlist"                     label="{{room.roomname}}">                  <div ng-controller="chatcontroller">                     <!-- display messages -->                     <md-list>                         <md-item ng-repeat="msg in messages">                             <md-item-content>                                 <div class="md-tile-content">                                     <div class="bubble">                                         <strong>{{msg.from}}</strong><br>                                         {{msg.body}}                                     </div>                                 </div>                             </md-item-content>                         </md-item>                     </md-list><!--/displaymessages-->                      <!-- chat controls -->                     <div layout="row" layout-margin layout-wrap>                         <div flex="33">                             <!-- assign username -->                             <label for="nameinput">username</label>                             <input ng-model="name" type="text" id="nameinput" placeholder="enter username...">                         </div>                         <div flex="95">                             <!-- post message -->                             <label>message</label>                             <textarea class="form-control"                                        ng-model="msg"                                       ng-keydown="addmessage($event)"                                        id="messageinput"                                       placeholder="type message...">                             </textarea>                         </div>                          <div layout="row" layout-sm="column" layout-margin layout-fill layout-align="start end">                             <!-- click send message -->                             <div flex>                                 <md-button class="md-raised md-primary pull-left" ng-click="sendmessage()">send</md-button>                             </div>                             <!-- modal add or join room -->                             <div flex ng-controller="modalcontroller">                                 <md-button class="md-raised md-primary pull-left" ng-click="open()">add or join room</md-button>                             </div>                             <!-- opens helper -->                             <div flex ng-controller="helpcontroller">                                 <md-button class="pull-right" ng-click="open()" ng-href="">need help?</md-button>                             </div>                         </div>                 </div><!--/chatcontroller-->             </md-tab>         </md-tabs><!--/tabs container-->     </div><!--/roomcontroller--> 

room.js

angular.module('myapp') .controller('roomcontroller', function($scope, sharefactory) {     $scope.roomlist = sharefactory.roomlist;      // use default index 0 in roomlist     $scope.selectedindex = 0;      $scope.$on('roomchange', function(event, data) {         $scope.selectedindex = data;         console.log('heard change!');         console.log('the data is: ' + data);     }); }); 

modal.js

angular.module('myapp') .controller('modalcontroller', function($rootscope, $scope, $modal, chatfactory, sharefactory) {     $scope.open = function () {         var modalinstance = $modal.open({             templateurl: 'views/modal.html',             controller: 'modalinstancecontroller'         });          modalinstance.result.then(function (name) {             var found = false;             var length = sharefactory.roomlist.length;             var index = 0;              for(var = 0; < length; ++i) {                 if(sharefactory.roomlist[i].roomname === name) {                     found = true;                     index = i;                     console.log('index ' + index);                 }             }              if(!found) {                 sharefactory.roomlist.push({ roomname : name});                 index = sharefactory.roomlist.length - 1;             }             else {                 // don't care disabled, not feature want use                 //sharefactory.roomlist[index].disabled = false;             }              // broadcast event children of rootscope             // namely want roomcontroller listen change             $rootscope.$broadcast('roomchange', index);         }, function () {             console.log('cancel');         });     }; }); 

ya know, came in github issue while ago, may have been kicked backlog due other high priority issues.

i added feature master: https://github.com/angular/material/commit/8285e2d0bb6efbc72e311ee85b619cbbe8437072

and should viewable shortly on our site in second demo: https://material.angularjs.org/head/#/demo/material.components.tabs

in meantime, should able solve adding following code:

if(!found) {   sharefactory.roomlist.push({ roomname : name});   index = sharefactory.roomlist.length - 1;   $timeout(function () {     sharefactory.selectedindex = index;   }); } 

the $timeout necessary because must wait until after render finished before can update selected index new 1 - otherwise, think valid out of range.

hope helps!