AngularJS Playground - Clear ngOptions HTML Select

by Naveen Jose

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-controller="DemoController">
    <select ng-model="messageSource" name="messageSource" ng-options="item.id as item.value for item in screenResponse">
        <option value="">--Select--</option>
    </select>
    <button ng-click="ClearOptions()" ng-disabled="screenResponse.length ===0">
        Clear Options
    </button>
    <button ng-click="LoadOptions()" ng-disabled="screenResponse.length !==0">
        Load Options
    </button>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('DemoController', ["$scope", function($scope) {
    $scope.screenResponse = [{
        id: 1,
        value: 'value1'
    }, {
        id: 2,
        value: 'value2'
    }, {
        id: 3,
        value: 'value3'
    }, {
        id: 4,
        value: 'value4'
    }];
    var screenResponseCopy = angular.merge([], $scope.screenResponse);
    $scope.ClearOptions = function() {
        $scope.screenResponse.length = 0;
    }
    $scope.LoadOptions = function() {
        $scope.screenResponse = screenResponseCopy;
    }
}]);