Update md-select programmatically

Question

I have the following HTML

<md-select id="testSelect"
           ng-model="objElements" ng-change="onElementChange()"
           name="objElements" placeholder="Select Stuff">
    <md-option id="testOption"
               ng-repeat="ele in Elements"
               ng-if="ele.Completed==false"
               ng-value=ele.ID 
               ng-selected="$first">
        {{ele.Name}}
    </md-option>

Elements is populated using a $http.get request and is displaying correctly - I am able to select an element and ng-change fires correctly.

If I add a new element using a $http.post, then pushing the new object onto Elements[] using Elements.push($scope.NewElement), is there a way I can set the new object as the 'selected' element?

I can see the new element has been added correctly to the Elements[] but cannot figure out how to set ng-selected=NewElement.

Answer 1

Yes, simply set objElements to your new element from the response. Should do the trick.

There's a good example here: https://material.angularjs.org/latest/api/directive/mdSelect (code below).

<div ng-controller="MyCtrl">
  <md-select ng-model="selectedUser">
    <md-option ng-value="user" ng-repeat="user in users">{{ user.name }}</md-option>
  </md-select>
</div>

angular.controller('MyCtrl', function($scope) {
  $scope.users = [
    { id: 1, name: 'Bob' },
    { id: 2, name: 'Alice' },
    { id: 3, name: 'Steve' }
  ];
  $scope.selectedUser = { id: 1, name: 'Bob' };
});