Ionic, JavaScript and Angular - unable to select one from the item

Question

On my Ionic modal view page, I have a select2 element that needed to pop a list of patients which is already available at my controller, when I click on the select2 I see the list of the patients (items) but unable to select one from the item.

Here is my HTML code containing the modal:

<ion-view>
<header class="bar bar-header bar-positive">
    <h1 class="title">New Prescription</h1>
    <button class="button button-positive">Save</button>
    <div class="button button-clear" ng-click="modal.hide()">
        <span class="icon ion-close"></span>
    </div>
</header>
<ion-content padding="true" class="has-header">
    <div id="formdiv">
        <div class="form-group">
            <form>
                <div class="list">
                    <div>

                    </div>
             <select name="pid"
               ui-select2="{openOnEnter: true,width: '100%',allowClear: true,placeholder: '--- Search using Name, Emr id or Phone Number---'}"
               ng-model="selectedPatient" ng-change="patientChange(selectedPatient, $index)">
              <option></option>
               <option ng-repeat="patient in patientItems" value="{{patient}}">{{patient.fullname}} </option>
               </select>

                     <!--<input type="hidden" id="pid" name="pid">-->

                    <label class="item item-input">

                        <input type="hidden" id="generic">
                    </label>

                    <label class="item item-input">
                        <input type="hidden" id="drug" name="drug">
                    </label>
                    <label class="item item-input">
                        <span class="input-label">Frequency</span>
                        <input type="text" placeholder="e.g: 2 x daily">
                    </label>
                    <label class="item item-input">
                        <span class="input-label">Duration</span>
                        <input type="number" placeholder="e.g: 7">
                    </label>

                    <div class="item item-checkbox">
                        <label class="checkbox"> <input type="checkbox"> </label>
                        Refillable
                    </div>
                </div>

                <div class="list list-inset">
                    <button class="button-icon button-calm ion-android-add">add</button>
                    <label class="item item-input item-stacked-label">Add Note
                        <textarea placeholder="Add Prescription Note"></textarea>
                    </label></div>

            </form>

        </div>
    </div>
</ion-content>

My controller:

.controller('MainCtrl', function ($scope, $state, $ionicModal, DataStore, $http) {
    if (!angular.isDefined(localStorage.staffID)) {
        $state.go('login');
    }
    //todo: Controller for  all global information
    //  $ionicModal.controller('NewCtrl')

    $ionicModal.fromTemplateUrl('templates/new.html', function ($ionicModal) {
        $scope.modal = $ionicModal;

    }, {
        scope: $scope,
        animation: 'slide-in-up'
    });

    $scope.newPrescription = function () {
        //todo: loads up the registration form
        $scope.modal.show();
        var url = DataStore.domain;

                    $http.get(url + '/api/search_patients.php?limit=100&asArray=true&medical=true&q=i').success(function (data) {
                        $scope.patientItems = data;

                    });

        //todo: Do Search for Registered patient

    };


})

Answer 1

You need to have valid patient in ng-model.

For instance in your controller set selectedPatient to one of the valid patients.

$http.get(url + '/api/search_patients.php?limit=100&asArray=true&medical=true&q=i').success(function (data) {
    $scope.patientItems = data;
    $scope.selectedPatient = data[0];  // set it to the valid patient
});