Angular Select with remove

References: http://stackoverflow.com/questions/16156086/get-the-index-of-selected-option-in-angular

by Sajeetharan Sinnathurai

HTML

<body ng-app="app">
<div ng-controller="myCtrl" class="video">
    <select ng-model="model.selectedCategory" ng-options="category as category.title for category in model.categories"></select>
    <button ng-click="removeCategory()">remove</button>
    <span>{{model.selectedCategory | json}}</span>
</div>
</body>

JavaScript

var app = angular.module("app", ['main']);

angular.module('main', [])

.controller("myCtrl", ['$scope', function($scope){
    $scope.model = {
        selectedCategory: {},
        categories: [
            {title: "Cat1"},
            {title: "Cat2"}
        ]
    }
    //init
    $scope.model.selectedCategory = $scope.model.categories[0];
    
    $scope.removeCategory = function(){
        var ind = $scope.model.categories.indexOf( $scope.model.selectedCategory );
        $scope.model.categories.splice( ind, 1 );
        $scope.model.selectedCategory = $scope.model.categories[0];
    }
}])