How can i use multi select dropdown on tables using angularjs?

Question

Here is my select dropdown

<select  ng-model="searchtxt">
<option value="">Select Institute</option>
<option ng-repeat="user in products | unique : 'Institute'" value="{{user.Institute}}">{{user.Institute}}</option></select>

Here is my table

<table>
<thead>
<th>Institute<th>
</thead>
<tbody>
<tr ng-repeat="user in products>
<td>{{user.Institute}}</td>
</tr>
</tbody>
</table>
</table>

Here is my json

$scope.products = [
{"Institute": "Academy for Coaching Excellence"}
{"Institute": "Sample for training Excellence"}
{"Institute": "Demo for education Excellence"}
{"Institute": "Academy for best Excellence"}
];

I have tried following

$scope.selectedRows = [];
$scope.select = function(item) {
item.selected ? item.selected = false : item.selected = true;
}
$scope.getAllSelectedRows = function() {
var selectedRows = $filter("filter")($scope.users, {
selected: true
}, true);    
$scope.selectedRows = selectedRows;
}

Can anyone help me to achive the optimal solution in my case?

Answer 1

A multiple select is a regular select with the multiple property added to it. In angular, whatever you select will be bound to the ng-model variable.

I'm not sure if this example answers your question, but it shows how to access the data from the multi-select menu

 angular.module('selectExample', []).controller('ExampleController', ['$scope', function($scope) { $scope.products = [{ "Institute": "Academy for Coaching Excellence" }, { "Institute": "Sample for training Excellence" }, { "Institute": "Demo for education Excellence" }, { "Institute": "Academy for best Excellence" }]; $scope.searchtxt = []; }]);

 .selected { color: green; font-style: italic; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script> <div ng-app="selectExample"> <div ng-controller="ExampleController"> <div>Select Institute</div> <select multiple ng-model="searchtxt"> <option ng-repeat="user in products" value="{{user.Institute}}">{{user.Institute}}</option> </select> <hr> <table> <thead> <th>Institute <th> </thead> <tbody> <tr ng-repeat="user in products"> <td ng-class="{'selected':searchtxt.indexOf(user.Institute)>-1}">{{user.Institute}}</td> </tr> </tbody> </table> <hr> $scope.searchtxt: {{searchtxt}} </div> </div>