Question

Two way Databinding with AngularJS + Angular-UI Select2 with Ajax functionality.

I created a directive to implement Select2 dropdown Ajax behavior in Generic way:- (It requires few attributes to get formatResult, formatSelection methods to call, and url).

My problem is how to load value in “Edit Mode”, selected value from dropdown is received in formatselection method, but while loading the screen, I want to load the dropdown from the same value to which it is binded.
Example:-

    <input type="hidden" for="part" class="bigdrop" style="width: 250px" formatresult="partFormatResult" formatselection="partFormatSelection" aurl="/api/Part" search-drop-down ui-select2="configPartSelect2" ng-model="product.SalesPart" data-placeholder="Select Part" ng-change="onPartSelect();" />

    Directive Code

    One23SRCApp.directive('searchDropDown', ['$http', function (http) {
        return function (scope, elm, attrs) {
            var raw = elm[0];
            var fetchFuncName = "fetch" + attrs["uiSelect2"];
            console.log("Directive load pat  " + scope[attrs["ngModel"]]);
            scope[fetchFuncName] = function (queryParams) {
                var result = http.get(queryParams.url, queryParams.data).success(queryParams.success);
                result.abort = function () {
                    return null;
                };
                return result;
            };


            scope[attrs["uiSelect2"]] = {
                minimumInputLength: 3,
              initSelection: scope[attrs["initselection"]],
                ajax: {
                    url: attrs["aurl"],
                    data: function (term, page) {
                            return { params: { isStockable: true, query: term, pageNo: page, pageSize: 20 } };
                    },
                    dataType: 'json',
                    quietMillis: 100,
                    transport: scope[fetchFuncName],
                    results: function (data, page) {
                        var more = (page * 20) <= data.length; // whether or not there are more results available
                        return { results: data, more: more };
                    }
                },
                formatResult: scope[attrs["formatresult"]],
                formatSelection: scope[attrs["formatselection"]],
                dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
            };

            return { bind: attrs["ngModel"] };
        };

    }]);

//inside controller-
after loading of data
   $("#partDD").select2("val", product.SalesPart);
//$scope.partInitSelection definition.
    $scope.partInitSelection = function (element, callback) {
        if (! $scope.PartList) {
            $scope.PartList = [$scope.product.SalesPart];
        } else {
            $scope.PartList.push($scope.product.SalesPart);
        }
        callback($scope.product.SalesPart);
    };

}

Answer 1

Fixed it finally:-
As i kept configuration object in scope[attrs[“uiSelect2”]],
I called the .ajax.data method of above configuration object each time I load data.

scope[attrs["uiSelect2"]].ajax.results(product.SalesPart.text, 1);