ng-model not binding two way in a modal
angularjs, ionic-framework, javascript
Solution
Two-way binding works best with a nested object. Change your bindings to use something like this
$scope.data = {};
$scope.data.items = [];
Problem
I have this `html` ``` <body ng-controller="AppCtrl"> <ion-side-menus> <ion-side-menu-content> <ion-nav-bar class="nav-title-slide-ios7 bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> </ion-nav-bar> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"> </button> </ion-nav-buttons> <ion-nav-view animation="slide-left-right" name="main-view"> </ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <div class="list"> <a menu-close href="#" class="item item-icon-left"> <i class="icon ion-home"> </i> Home </a> <a menu-close href="#/product" class="item item-icon-left"> <i class="icon ion-home"> </i> products </a> <a menu-close href="#/category" class="item item-icon-left"> <i class="icon ion-home"> </i> Category </a> </div> </ion-side-menu> </ion-side-menus> <script id="product.html" type="text/ng-template"> <ion-view title="products"> <ion-content> <div class="list"> <a class="item" href="#/product-form?id={{item.id}}" ng-repeat="item in items | filter:{nome: searchText}"> { {item.nome} } <span class="item-note"> { {item.quantidade} } </span> </a> </div> </ion-content> <div class="tabs tabs-icon-top"> <a class="tab-item" href="#/product-form"> <i class="icon ion-home"></i> Adicionar </a> <a class="tab-item" ng-click="openModal()"> <i class="icon ion-search"></i> Filtrar </a> </div> </ion-view> </div> </script> <script id="search.html" type="text/ng-template"> <div class="bar bar-header item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-ios7-search placeholder-icon"></i> <input type="search" placeholder="busca" ng-model="searchText"> </label> <button class="button button-clear" ng-click="closeModal()"> cancelar </button> </div> </script> </body> ``` And with this `controller` ``` angular.module('ionicApp.controllers', ['ionicApp.config', 'xc.indexedDB']) .controller('ProductController', function ($scope, $ionicPopup, $timeout, $ionicModal, $indexedDB, $window, $ionicModal) { $scope.safeApply = function (fn) { var phase = this.$root.$$phase; if (phase == '$apply' || phase == '$digest') { if (fn && (typeof (fn) === 'function')) { fn(); } } else { this.$apply(fn); } }; var OBJECT_STORE_NAME = constants.productStore; $scope.items = []; $scope.searchText = ""; $scope.getAll = function () { var myObjectStore = $indexedDB.objectStore(OBJECT_STORE_NAME); myObjectStore.getAll().then(function (results) { // Update scope $scope.safeApply(function () { $scope.items = results; }); }); }; $scope.getAll(); $ionicModal.fromTemplateUrl('search.html', { scope: $scope, animation: 'slide-left-right' }).then(function (modal) { $scope.modal = modal; }); $scope.closeModal = function () { alert($scope.searchText); $scope.modal.hide(); }; $scope.openModal = function () { //$scope.searchText = "a"; $scope.getAll(); $scope.modal.show(); }; $scope.closeModal = function () { alert($scope.searchText); $scope.modal.hide(); }; //Cleanup the modal when we're done with it! $scope.$on('$destroy', function () { $scope.modal.remove(); }); // Execute action on hide modal $scope.$on('modal.hidden', function () { // Execute action }); // Execute action on remove modal $scope.$on('modal.removed', function () { // Execute action }); }) ``` Edit Here is where i define the `ProductController` ``` var app = angular.module('ionicApp', ['ionic', 'ionicApp.controllers']); app.config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('index', { url: "/", views: { 'main-view': { templateUrl: "home.html", controller: "AppCtrl" } } }) .state('product', { url: "/product", views: { 'main-view': { templateUrl: "product.html", controller: 'ProductController' } } }); $urlRouterProvider.otherwise("/"); }); ``` My problem is the `searchText` model isn't updating when the value changes. I tried `$watch`, `ng-options`. I can put a initial value to the `$scope.searchText` on `openModal` method, but after inputed values don't update the model value, because of this my list isn't filtered. Anyone could help me? Thanks. Edit 2 I solved the problem adding the search text into the modal. ``` $scope.modal = modal; $scope.modal.searchText = ""; ``` And i changed the attribute to the new variable. ``` <input type="search" placeholder="busca" ng-model="modal.searchText"> ``` Thanks for the support.