angularjs default select always changes

Question

with angularjs select tab and ng-options,I cannot get the right default selecedValue after I selected one .

html

<select ng-model="selectedStyle" ng-options="style as style.name for style in styles"></select>

javascript

 $scope.$on('openStyleList', function (event, page) {


                styleListService.Get().
                then(function (data) {
                    var tempArray = new Array();
                    if(page.pageType == 'Jacket')
                    {
                        tempArray.push(_.first(data))
                        $scope.styles = tempArray;
                        alert($scope.styles[0].name)//here i get the first one
                        $scope.selectedStyle = $scope.styles[0];//but here the $scope.selectedStyle is not always the first one! It's always the one that I selected before.I cannot set it to the default one($scope.styles[0])
                    }
                    else if (page.pageType == 'Body') {
                        if (_.rest(data).length == 1) {
                            tempArray.push(_.rest(data))
                            $scope.styles = tempArray;
                        }
                        else {
                            $scope.styles = _.rest(data);
                        }
                        alert($scope.styles[0].name)//aslo here
                        $scope.selectedStyle = $scope.styles[0];//aslo here
                    }

                });

            })

the styleListService code:

angular.module('editorApp')
  .service('styleListService', ['$http', '$log', '$q', '$timeout', '$window', 'baseService', 'settings',
      function styleListService($http, $log, $q, $timeout, $window, baseService, settings) {

          var StyleListServiceFactory = {};

          var _get = function () {

              return baseService.get('styles/');

          }
          StyleListServiceFactory.Get = _get

          return StyleListServiceFactory;
  }]);

the part of baseService code :

var _get = function (apiPath, responsetype) {

    var deferred = $q.defer();

    if (responsetype == undefined)
    {
        responsetype = "";
    }

    $http.defaults.cache = false;

    $http.get(settings.baseUrl + apiPath,
        {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            responseType: responsetype

        }).success(function (response) {

            deferred.resolve(response);

        }).error(function (data, status, headers, config) {

            deferred.reject(status);

        });

    return deferred.promise;
}

baseServiceBaseFactory.get = _get;

Answer 1

1) Select your default value as model
you can do this like

<select tabindex="2" class="dropdown-control " id="drpSystemDeliveryCos" ng-model="selecedValue ">
                                                            <option ng-repeat="style in styles" value="{{style .ID}}">{{style .name}}</option>
                                                        </select>

OR
    <select tabindex="6" class="form-control" id="drpOrderType1" ng-options="style.ID as style.name for style in styles " ng-model="selecedValue" ></select>