Can't change select option item angular

Question

I have a select option like this:

<select ng-init="filterSelected = getItems.data.key" 
        ng-model="filterSelected" 
        ng-options="data.key as data.label for data in getItems.data" ></select>

In which i parse a json that returns me some results that shows as item in this select. This is not a problem, i can display the items but i can't change them. It it stuck on the first one and even if i try to change the value still shows the first. By the way, i have a function in my javascript:

$scope.getObjects = function(){
            for (var i = 0; i < $scope.getItems.data.length; i++) {
                if($scope.filterSelected = $scope.getItems.data[i].key){
                    return $scope.getItems.data[i].objects;
                }
            }
        };

this function needs because i have to find the correct object to cycle in my json that is something like this:

"data": [
        {
            "label": "first",
            "objects": [
                {
                    "name": "firstObj",
                    "attributes": [
                        {
                            ----,
                            ----,
                            ----
                        },
                        {
                            ----,
                            ----,
                            ----
                        }
                    ]
                }
            ],
            "key": "1"
        },
        ---
        ---

so i can find the "object" i selected and i can find the correct attributes of that object. The problem is that is stuck. the results are correct but it shows only the first.. Maybe there is a problem with the model?

Answer 1

You can select what value you want select in ngOptions

in your code you select key field, and then by key try get objects, but you can get objects at once

<select
    ng-model="filterSelected" 
    ng-options="data.objects as data.label for data in getItems.data" ></select>

var myApp = angular.module('myApp', []);

myApp.controller("mycontroller", ["$scope", "$http",
  function($scope, $http) {
    $scope.getItems = {
      "data": [{
        "label": "first",
        "objects": [{
          "name": "firstObj",
          "attributes": [{
            "att1": "asd",
            "att2": "asd2"
          }, {
            "att3": "asd3",
            "att4": "asd4"
          }]
        }],
        "key": "1"
      }, {
        "label": "second",
        "objects": [{
          "name": "secondObj",
          "attributes": [{
            "att1": "asd",
            "att2": "asd2"
          }, {
            "att3": "asd3",
            "att4": "asd4"
          }]
        }],
        "key": "2"
      }]

    };
    $scope.filterSelected = $scope.getItems.data[0].objects;
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='mycontroller'>
  <select ng-model="filterSelected" ng-options="data.objects as data.label for data in getItems.data"></select>

  {{filterSelected}}
</div>

UPDATE for comment, so you need save full object, instead just object, label or key properties.

<select
    ng-model="filterSelected" 
    ng-options="data.label for data in getItems.data" ></select>

var myApp = angular.module('myApp', []);

myApp.controller("mycontroller", ["$scope", "$http",
  function($scope, $http) {
    $scope.getItems = {
      "data": [{
        "label": "first",
        "objects": [{
          "name": "firstObj",
          "attributes": [{
            "att1": "asd",
            "att2": "asd2"
          }, {
            "att3": "asd3",
            "att4": "asd4"
          }]
        }],
        "key": "1"
      }, {
        "label": "second",
        "objects": [{
          "name": "secondObj",
          "attributes": [{
            "att1": "asd",
            "att2": "asd2"
          }, {
            "att3": "asd3",
            "att4": "asd4"
          }]
        }],
        "key": "2"
      }]

    };
    $scope.filterSelected = $scope.getItems.data[0];
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='mycontroller'>
  <select ng-model="filterSelected" ng-options="data.label for data in getItems.data"></select>

  <div>objects: {{filterSelected.objects}}</div>
  <div>key: {{filterSelected.key}}</div>

</div>