I can't access to controller data from input select on modal


#1

Hi, I’m triying access to data array filled with sqlite table content. I have a modal view when I create new record but i can’t load data input select:

Array is filled given that it prints in log when the controller init.

This is my code:

Parent call view:

<ion-view view-title="Gestion de animales">
    <ion-content ng-controller="AnimalsCtrl" data-ng-init="init()">
        <div class="row header">
            <div class="col col-10">Codigo</div>
            <div class="col col-20">Nombre</div>
            <div class="col col-30">Apellidos</div>
            <div class="col col-40">Email</div>
        </div>
        <ion-list >
            <ion-item ng-repeat="animal in animals" item="animal" href="#/tab/animals/{{animal.CODIGO}}">
                <div class="row">
                    <div class="col col-10">{{animal.CODIGO}} </div>
                    <div class="col col-20">{{animal.NOMBRE}} </div>
                    <div class="col col-30" >{{animal.APELLIDOS}} </div>
                    <div class="col col-40">{{animal.EMAIL}} </div>
                    <ion-option-button class="button-assertive" ng-click="eliminar(animal)">Eliminar</ion-option-button>
                </div>
            </ion-item>
        </ion-list>
   </ion-content>
    <ion-footer-bar align-title="left" class="bar-assertive">
        <div class="buttons">
            <button class="button">Left Button</button>
        </div>
        <h1 class="title"></h1>
        <div class="buttons" ng-click="openModal()">
            <button class="button">Nuevo animal</button>
        </div>
    </ion-footer-bar>
</ion-view>

Modal view

<script id="modal.html" type="text/ng-template">
    <div class="modal">
        <ion-header-bar class="bar-stable">
                <button class="button" ng-click="closeModal()">Atras</button>
                <h1 class="title">Nuevo Animal</h1>
        </ion-header-bar>
       
        <form ng-submit="anadirAnimal(datos)">
            <ion-content>
                <ion-list class="list-inset">
                    <ion-item class="item-input">
                        <span class="input-label">Codigo</span>
                        <input type="text" ng-model="datos.codigo">
                    </ion-item>
                    <ion-item class="item-input item-select">
                        <span class="input-label">Especie</span>
                        <select ng-options="item.CODIGO as item.DESCRIPCION for item in especies track by item.CODIGO" ng-model="datos.especie"></select>
                    </ion-item>
                    <ion-item class="item-input">
                        <span class="input-label">Cepa</span>
                        <input type="text" ng-model="datos.cepa">
                    </ion-item>
                    <ion-item class="item-input item-select">
                        <span class="input-label">Transgenico</span>
                        <select ng-model="datos.transgenico">
                            <option selected>Si</option>
                            <option>No</option>
                        </select>
                    </ion-item>
                    <ion-item class="item-input item-select">
                        <span class="input-label">Sexo</span>
                        <select ng-model="datos.sexo">
                            <option selected>Macho</option>
                            <option>Hembra</option>
                        </select>
                    </ion-item>
                    <ion-item class="item-input">
                        <span class="input-label">Fecha Nacimiento</span>
                        <input type="date" placeholder="fechaNac" ng-model="datos.fechanac">
                    </ion-item>
                    <ion-item class="item-input">
                        <span class="input-label">Fecha Cirugia</span>
                        <input type="date" placeholder="fechaCir" ng-model="datos.fechacir">
                    </ion-item>
                </ion-list>
            </ion-content>

            <ion-footer-bar align-title="left">
                <button class="button button-bar button-stable" type="submit">Aceptar</button>
            </ion-footer-bar>
        </form>
    </div>
</script>

Array filled in controller init function

angular
    .module('proyecto')
    .controller('AnimalsCtrl', AnimalsCtrl);

function AnimalsCtrl($scope, $cordovaSQLite, $ionicPopup, $ionicModal, Animales) {
    $scope.animals = [];
    $scope.investigadores = [];
    $scope.especies = [];

  $scope.datos = {
    codigo: 'sasa',
    especie: ''
  }

   
    //$scope.animals = Animales.all();
    //$scope.remove = remove;

    $scope.shouldShowDelete = false;
    $scope.shouldShowReorder = false;
    $scope.listCanSwipe = true

        // RELLENAMOS ARRAY DE ESPECIES
        var query = "SELECT CODIGO, DESCRIPCION FROM ESPECIE";
        $cordovaSQLite.execute(db, query, []).then(function (res) {
            if (res.rows.length > 0) {
                for (var i = 0; i < res.rows.length; i++) {
                    $scope.especies.push({
                        CODIGO: res.rows.item(i).CODIGO, DESCRIPCION: res.rows.item(i).DESCRIPCION
                    });
                    console.log(res.rows.item(i).DESCRIPCION);
                }
            }
        }, function (err) {
            console.error(err);
        });



    };

and these are my modal functions:

   $ionicModal.fromTemplateUrl('modal.html', {
       scope: $scope,
       animation: 'slide-in-up'
   }).then(function (modal) {
       $scope.modal = modal
   })

   $scope.openModal = function () {
       $scope.modal.show()
   }

   $scope.closeModal = function () {
       $scope.modal.hide();
   };

   $scope.$on('$destroy', function () {
       $scope.modal.remove();
   });