ui-selectui-select2angular-ui-select

Ui-select ng-model is not binded with selected


I am trying to do a simple drop down menu with a search in it. I cant get the ng-model to be changed on this drop down. this is what I have done, and as you can see its very simple (mostly copy paste from the get started)

I couldnt find any info about the $select. Is the problem is because I didnt add this to the ng-model? if so, what should I add to the controller

<div class="form-group">
<label class="col-md-1">Investigation type<font color="red"><b>*</b></font></label>
    <div class="col-md-3">
        <ui-select ng-model="investigationType" ng-change="someFunc()" theme="bootstrap">
        <ui-select-match placeholder="Select or search a contries in the list...">
            <span>{{$select.selected.name}}</span>
        </ui-select-match>
            <ui-select-choices repeat="item in contries | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>
            </ui-select-choices>
        </ui-select>
    </div>
</div>

{{investigationType}}

as you can see, very simple thing, though after selected I dont see anything on the page. whats wrong?

app.controller('investigationCtrl', ['$scope', '$http', function ($scope, $http) {

    $scope.investigationType ="";
    $scope.toolShow=false;

    $scope.someFunc = function () {
        $scope.investigationType == "Alabama")
            $scope.toolShow = true;
        else
            $scope.toolShow = false;
    }

    $scope.contries = [
        { id: 1, name: "Alabama" },
        { id: 2, name: "Alaska" },
        { id: 3, name: "Arizona" },
        { id: 4, name: "Arkansas" }];
}]);

Solution

  • You need ng-model to hold the selected object, not a string.

    Rewrite to ng-model="contries.selected" (while contries is you data array).

    Then add {{contries.selected}} to your template, you will see a serialization of your selected object, so just use contries.selected.name to access your item name.

    Here is a working plunk

    You can also do something like

    ng-change="someFunc($select.selected)"
    

    To access your selected object from the callaback, then you can avoid messing with the ng-model.