API Rest Issue

[gedarufi]

For any reason when i call to the rest countries the chosen don't refresh, this is my code

angular
    .module('app')
    .factory('CountryFactory', function ($http) {
        var urlBase = 'https://restcountries-v1.p.mashape.com/all';
        var dataFactory = {};

        dataFactory.LoadCountries = function () {
            return $http.get(urlBase, {
                headers: {
                    "X-Mashape-Key": "YOUR_KEY"
                }
            });
        }

        return dataFactory;
    })
    .controller('UserController', ['$scope', 'CountryFactory', function ($scope, CountryFactory) {
        InitController();

        function InitController() {
            CountryFactory
                .LoadCountries()
                .success(function (countries) {
                    $scope.countriesList = countries;
                })
                .error(function (data, status, headers, config) {
                    console.log(data);
                    console.log(status);
                    console.log(headers);
                    console.log(config);
                });
        }

My HTML

<select
    class="form-control"
    required
    ng-model="user.Nationality"
    data-placeholder="Select your nationality"
    chosen="countriesList"
    ng-options="country.demonym for country in countriesList">
</select>

I solved calling through to setInterval but i think that this not is the better way

....
.directive('chosen', function() {
    var linker = function(scope, element, attr) {
        // update the select when data is loaded
        scope.$watch(attr.chosen, function(newVal, oldVal) {
            var tmr = setInterval(function () {
                element.trigger('chosen:updated');

                clearInterval(tmr);
            }, 1000);
        });

        // update the select when the model changes
        scope.$watch(attr.ngModel, function() {
            var tmr = setInterval(function () {
                element.trigger('chosen:updated');

                clearInterval(tmr);
            }, 1000);
        });

        element.chosen();
    };

    return {
        restrict: 'A',
        link: linker
    };
})

Regards and thanks for your time

[simpulton]

Hi German -- can you put this in a plunk and we can work through it together? Thanks!

[simpulton]

Here is the best solution that we have come up with so far: http://plnkr.co/edit/0yYnPCMXVSMc4HkBZYN7?p=preview

It still uses a mechanism to delay the "chosen:updated" action, but it uses AngularJS' native $timeout service (which is a bit more concise than setInterval/clearInterval). Sometimes when working with these third-party libraries, you have to give it time to catch up. That being said, if anyone can come up with a solution that does not need this work-around, we would be delighted to see it!

[saithis]

Maybe scope.$$postDigest would be better: http://plnkr.co/edit/9zsyEyteLKX09XJAq45g?p=preview