We Keep Coding

Angular js pass value from select menu to controller using ng-change

I wanted to pass everytime i select an item from a ui-select to the controller I did try to use ng-update and ng change but it does not seem to work. Any idea? why code is below. Thank you. I just want to trigger a function once i select an item from the ui select.
controller
$scope.update = function () {
alert("triggered")
}
view
<ui-select ng-change="update()" multiple="multiple" tagging="tagging" tagging-label="(custom 'new' label)" ng-model="main.record.skills" theme="bootstrap" sortable="true" style="width: 300px;" title="">
<ui-select-match class="ui-select-match" placeholder="Select skills">{$ $select.selected.name $}{$ $item.name | limitTo:70 $} {$ $item.name.length > 70 ? "..." : "" $}</ui-select-match >
<ui-select-choices ng-change="main.update()" refresh="main.read_skills($select.search)" repeat="skill in main.skills | filter:$select.search track by $index">
<div ng-bind-html="skill.name | highlight: $select.search"></div>
{$ name $}
</ui-select-choices>
</ui-select>

Add on-select="onSelected($item)" to your ui-select and in controller:
$scope.onSelected = function (selectedItem) {
//do selectedItem.PropertyName like
//selectedItem.Name or selectedItem.Key
//whatever property your list has.
}

ui-select it is possible to load data while typing

i'm new to angularjs. it is possible to load a data while typing in ui-select.Me having record more that 9000. can anyone help for this
<ui-select ng-model="item.general_ledger" name ="general_ledger_1" id ="general_ledger_{{$index}}" theme="selectize" ng-disabled="disabled" style="width: 150px;" ng-required="true">
<ui-select-match placeholder="Select Any GL">{{$select.selected.Short_name}}</ui-select-match>
<ui-select-choices repeat="coa in loadCoalist | filter: $select.search" refresh="refreshFunction($select.search, $select)" refresh-delay="400">
<span ng-bind-html="coa.Short_name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>

ng-repeat with two dimensional array

I have a array which is of the form
$scope.vehPermitTypevalue = [ [ "NP","National Permit"], ["IND_AP","Andra Pradesh"]];
HTML CODE:
<ui-select name="permit" id ="permit" multiple ng-model="vehicle.selectedPermits" on-select="getVehiclepermitId($item)" ng-disabled="disabled" class="w-md mb-10">
<ui-select-match placeholder="Select or search a Permit Type in the list...">{{$item[1]}}</ui-select-match>
<ui-select-choices repeat="permittype in vehPermitTypevalue | filter:$select.search">
<span ng-bind-html="permittype | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
In Drop down I need Only the "National Permit" , "Andra Pradesh " but it is displaying like NP,National Permit AP, Andra Pradesh in a drop down .
I have changed my code to display on "national Permit" I did like this
<ui-select name="permit" id ="permit" multiple ng-model="vehicle.selectedPermits" on-select="getVehiclepermitId($item)" ng-disabled="disabled" class="w-md mb-10">
<ui-select-match placeholder="Select or search a Permit Type in the list...">{{$item[1]}}</ui-select-match>
<ui-select-choices repeat="permittype in vehPermitTypevalue[index][1] track by $index | filter:$select.search">
<span ng-bind-html="permittype | highlight: $select.search"></span>
</ui-select-choices>
then not able to display any items in drop down.
After selecting any option it is displaying properly like "national permit" with "X" mark to delete i did {{$item1}}.
here i am attaching pics
After selecting i am getting like this due to {{$item1}}

Try this
<ui-select-choices repeat="permittype in vehPermitTypevalue track by $index | filter:$select.search">
<span ng-bind-html="permittype[1] | highlight: $select.search"></span>
</ui-select-choices>

Angular UI multiple ui-select not working

Multiple select in Angular UI-Select not working. This is my example:
<ui-select multiple ng-model="params.filter()['manager']" class="form-control" reset-search-input="false">
<ui-select-match class="ui-select-match" allow-clear="true" placeholder="Manager">{{$select.selected.name }}</ui-select-match>
<ui-select-choices class="ui-select-choices" repeat="item.id as item in selectArray.managerArray | filter: $select.search "
refresh="refreshItem($select.search, 'UserGetSearch', 'managerArray')"
refresh-delay="0">
<div ng-bind-html="item.name"></div>
</ui-select-choices>
</ui-select>

How to show drop down Angularjs-ui-select onclick on hyperlink tags?

I want to bind ui-select to <a></a> tag, so when we click on this tag, it show ui-select.
Please see the following demo Plunker DEMO
In demo, select-ui are shown separately, but I want to show it only when I click on following drop-downs (person, country), when I click on person It show the following ui-select. Similarly When I click on country it should show the ui-select for country.
It should be attach with the drop-down,
<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<span ng-bind-html="country.name | highlight: $select.search"></span>
<small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
I modified the my pluncker DEMO as suggested by Naga Sandeep, but after selection of country, I am not able to select again person.

All you need to do is
1) toggle a property on scope
2) ng-show that property on ui-select.
Click for countries
<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;" ng-show="showCountry">
In your js file toggle the property
$scope.showCountry = false;
$scope.toggleCountry = function()
{
$scope.showCountry = !$scope.showCountry;
}

i updated the plunker example : http://plnkr.co/edit/e64JGEakaKRVBgNwgpDg?p=preview
into controller, add isActive() function:
//that function checks if the ui-select is active
$scope.isActive = function(type){
return $scope.selectedType == type;
};
into HTML:
Just wrap your ui-select into <div></div> and check if they are active, like this :
<div ng-show="isActive('person')">
<h3>Select2 theme</h3>
<p>Selected: {{person.selected}}</p>
<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
</div>
<div ng-show="isActive('country')">
<h3>Selectize theme</h3>
<p>Selected: {{country.selected}}</p>
<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<span ng-bind-html="country.name | highlight: $select.search"></span>
<small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</div>
Hope helps , good luck.