Can not retrieve values from modal using ng-model in ionic

Question

This is my modal-profile.html

 <ion-modal-view>
        <form name="itemEdit" novalidate>
            <ion-header-bar class="bar-positive fix-buttons">
              <div class="row">
              <a class="button  " ng-click="closeModal()">Cancel</a>
              <h1 class="title ">Diary</h1>
            </div>
            </ion-header-bar>
            <ion-content has-bouncing="true">
              <div class="row" ng-class="{'no-padding-top': !data.editItem}">
                <div class="col">
                  <label class="item item-input large">
                    <input type="text" placeholder="Title" ng-model="modelTitle">
                  </label>
                </div>
              </div>

             <div class="row description-row">
                <div class="col">
                  <label class="item item-input text">
                    <textarea placeholder="Description" rows="5" ng-model="modelDescription" ng-Required="true" lose-focus-on-return></textarea>
                  </label>
                </div>
              </div>


               <button class="button" ng-click="addDetail()">ADD</button>

              <div class="row charity-row">
                <div class="col col-10 vert-center">
                  <div class="charity large"></div>
                </div>
              </div>


            </ion-content>
          </form>
      </ion-modal-view>

This is my controller

.controller('ChatsCtrl', function($scope,$ionicModal, Chats,$state,$cordovaSQLite) {

    $scope.chats = Chats.all();
    $scope.remove = function(chat) {
        Chats.remove(chat);
    }

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

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

    $scope.addDetail = function(){

        alert($scope.modelTitle);
        alert($scope.modelDescription);

        var db = $cordovaSQLite.openDB("diary.db");
        var query = "INSERT INTO details (title, description) VALUES (?,?)";

        $cordovaSQLite
            .execute(db, query, [$scope.modelTitle, $scope.modelDescription])
            .then(function(res){
                alert("success");
            }, function(err){
                alert(err);
            });
    }
})

I want to pass modelTitle,modelDescription parameters to 'ChatCtrl'controller. So I put two alerts in addDetail() funtion to check .but those are not showing any value.can any one help me? thanks in advance !

Answer 1

Up to that I have used, instead of using a string in ng-model try with an object for binding and retrieving the value. Something like

HTML:

      <div class="row" ng-class="{'no-padding-top': !data.editItem}">
        <div class="col">
          <label class="item item-input large">
            <input type="text" placeholder="Title" ng-model="obj.modelTitle">
          </label>
        </div>
      </div>

     <div class="row description-row">
        <div class="col">
          <label class="item item-input text">
            <textarea placeholder="Description" rows="5" ng-model="obj.modelDescription" ng-Required="true" lose-focus-on-return></textarea>
          </label>
        </div>
      </div>


       <button class="button" ng-click="addDetail(obj)">ADD</button>

JS:

$scope.addDetail=function(object){

          alert(object.modelTitle);
           alert(object.modelDescription);
}

I got this with the Stack reference link here