Change Dropdown option on Button Click in Angular JS

Question

i want to change the dropdown options dynamically on click of button

HTML Code

 <ul data-role="listview" data-inset="true">
     <li ng-controller="exerciseTypeCtrl">
          <select id="exerciseType" data-role="listview" ng-options="type as type.text for type in types.cast " ng-model="item" ng-change="update()">
          </select>
    </li>
 </ul>

Using This JS

var myApp = angular.module('myApp',[]);

myApp.controller('exerciseTypeCtrl',function($scope,indoors,outdoors)
{
    $scope.types = indoors;
    $scope.update = function() {
    }
});

By Default I bind data indoors and I want to bind outdoors data on ng-click event so drop down updates dynamically I need Help on this issue

Answer 1

$scope.update = function() {
};

Replace To:

$scope.update = function() {
    $scope.types = outdoors;
}

See DEMO

Answer 2

For this you should make button under the same ng-controller scope in which you defined select component and then on ng-click event of that button you call function which you will create in same controller like your update function and in that function you will assign new values like $scope.types = outdoors in it

I create simple example for this you should check this out Thanks