AngularJS select with ng-options

Question

i'm developing an app that should have a form with select boxes that are populated dinamically with JSON arrays.

My problem is that the controller is correctly executed but the select options are not populated from the controller, there are empty.

This id my code:

<script>
        angular.module('ionicApp', [
        ])
        .controller('TimesController', function () {
            console.log("JavaScript Function");
            var data = <?php echo $json; ?>;
            console.log(data);
            var result = {
              events: [],
              events2: [],
              events3: [],
              schedules: [],
              schedules2: [],
              schedules3: []
            };
            var events = data;
            //console.log("events");
            //console.log(events);
            var events2 = data;
            var events3 = data;
            var dates = [];
            var sedi = [];
            var professionisti = [];
            console.log("qua3");
            for (var i = 0; i < events.length; i++) {
              if (dates.indexOf(events[i].day) === -1) {
                var date = events[i].day;
                dates.push(date);
                result.events.push({
                  date: date
                });
              }
              if (sedi.indexOf(events[i].sede) === -1) {
                var sede = events[i].sede;
                sedi.push(sede);
                result.events2.push({
                  sede: sede
                });
              }
              if (professionisti.indexOf(events[i].professionista) === -1) {
                var professionista = events[i].professionista;
                professionisti.push(professionista);
                result.events3.push({
                  professionista: professionista
                });
              }
              var a = 0;
              var found = false;
              while (a < result.schedules2.length) {
                  if (events[i].sede === result.schedules2[a].sede && events[i].professionista === result.schedules2[a].professionista) {
                      found = true;
                  }
                  a++;
              }
              if (found == false) {
                  result.schedules2.push({
                    sede: events[i].sede,
                    professionista: events[i].professionista
                  });
              }
              var a = 0;
              var found = false;
              while (a < result.schedules3.length) {
                  if (events[i].sede === result.schedules3[a].sede && events[i].professionista === result.schedules3[a].professionista && events[i].day === result.schedules3[a].date) {
                      found = true;
                  }
                  a++;
              }
              if (found == false) {
                  console.log("OLEE");
                  result.schedules3.push({
                    sede: events[i].sede,
                    professionista: events[i].professionista,
                    date: events[i].day
                  });
              }
              result.schedules.push({
                sede: events[i].sede,
                professionista: events[i].professionista,
                date: events[i].day,
                time: events[i].time
                //console.log("qua4");
              });
            }
            console.log(result);
        })
        </script>

        <div ng-app="ionicApp" ng-controller="TimesController as ctrl">
            <div align="center">
                <p style="font-size: 22px;">Inserisci appuntamento</p>
                <br>
                <div class="list" align="center">
                        <div class="input-label">
                        </div>
                        <select style="width: 75%;" ng-options="event as event.sede for event in ctrl.data.events2" ng-model="ctrl.form.sede">
                            <option value="" disabled>Seleziona sede</option>
                        </select>
                </div><br>
                <div class="list" align="center">
                        <div class="input-label">
                        </div>
                        <select style="width: 75%;" ng-options="schedule as schedule.professionista for schedule in ctrl.data.schedules2| filter: { sede: ctrl.form.sede.sede}" ng-model="ctrl.form.professionista" ng-disabled="!ctrl.form.sede">
                            <option value="" disabled>Seleziona professionista</option>
                        </select>
                </div><br>
                <div class="list" align="center">
                        <div class="input-label">
                        </div>
                        <select style="width: 75%;" ng-options="schedule as schedule.date for schedule in ctrl.data.schedules3| filter: { professionista: ctrl.form.professionista.professionista, sede: ctrl.form.sede.sede}" ng-model="ctrl.form.giorno" ng-disabled="!ctrl.form.professionista">
                            <option value="" disabled>Seleziona giorno</option>
                        </select>
                </div><br>
                <div class="list" align="center">
                        <div class="input-label">
                        </div>
                        <select style="width: 75%;" ng-options="schedule as schedule.time for schedule in ctrl.data.schedules| filter: { date: ctrl.form.giorno.date, professionista: ctrl.form.professionista.professionista, sede: ctrl.form.sede.sede}" ng-model="ctrl.form.ora" ng-disabled="!ctrl.form.giorno">
                            <option value="" disabled>Seleziona orario</option>
                        </select>
                </div><br>
            </div>
        </div>

Can someone help me to solve it?

Thank's

Answer 1

angular.module('app', []).controller('MyCtrl', function ($scope) {
  
    $scope.list = [{
        id: 27,
        name: "loruth water point",
        latitude: 4.453488123,
        longitude: 35.36021409
    }, {
        id: 28,
        name: "kibish",
        latitude: 5.286289986,
        longitude: 35.82917452
    }, {
        id: 30,
        name: "Ekalale",
        latitude: 4.434588531,
        longitude: 35.72135923
    }, {
        id: 34,
        name: "karubangorok",
        latitude: 4.506236007,
        longitude: 35.4201746
    }, {
        id: 35,
        name: "nakitoe kakumon",
        latitude: 4.214576564,
        longitude: 35.35912495
    }, {
        id: 36,
        name: "kaikor mission",
        latitude: 4.516645656,
        longitude: 35.42262991
    }];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
    <div ng-controller="MyCtrl">
         <h2>List:</h2>
<p>
        <select ng-model="selectedItem" ng-options="item.name for item in list">
            <option value="">-- choose --</option>
        </select>
        
    </p>
        <p>
            <h2>Selected:</h2>
            {{selectedItem.name}}
        </p>
    </div>
</div>

Check this example once.