Update parent scope's variable through $IonicModal

ionic-v1
1

I am having issue to update a variable through IonicModal Controller, even though i am passing the parent scope to the Modal controller.

My Index.html

<div class="row">
           <div class="col text-center">
               <button class=" button button-positive button-block" ng-click="openListSelection()">
                        {{selectedBrand}}
               </button>
           </div>
       </div>

Main Controller:

angular.module('myApp', ['ionic'])

.controller(‘MainController’, function ($scope, $ionicModal) {

$scope.selectedBrand = "Select Brand";

$scope.openListSelection = function () {
    $scope.BrandListModal.show();
};

$ionicModal.fromTemplateUrl('BrandList.html', function (modal) {
    $scope.BrandListModal = modal;
}, {
    scope: $scope,
    animation: 'slide-in-up',
    focusFirstInput: true
});

})

//Brand List Controller
.controller(‘BrandListController’, function ($scope) {

$scope.brandList = ['brand1',
   'brand2', 'brand3', 'brand4', 'brand5',
   'brand6', 'brand7', 'brand8', 'brand9',
   'brand10', 'brand11', 'brand12', 'brand13',
   'brand14', 'brand15', 'brand16', 'brand17',
   'brand18', 'brand19', 'brand20', 'brand21',
   'brand22', 'brand23', 'brand24', 'brand25',
   'brand26', 'brand27'];

$scope.selectBrand = function (brand) {
    $scope.selectedBrand = brand;
    $scope.BrandListModal.hide();
};

})

Modal

<ion-list>
            <ion-item ng-repeat="brand in brandList" ng-click="selectBrand(brand)">
               {{ brand }}
            </ion-item>
        </ion-list>

What i am trying to do is to click on the button then go to modal which has a list, and i can click it than the modal hide and change the button text to whatever i just selected,
Inside selectBrand method, it successfully get my selection, but when i assign $scope.selectedBrand = brand, the button on the main page doesn’t change.

Any help will be appreciated.

Thanks!!!

2

This happens because of your special controller of your modal.
You pass the parent scope to the modal, but if you add an own controller to it --> the modal gets its own scope.

There you could use angularjs events to pass the new value to another controller --> look for https://docs.angularjs.org/api/ng/type/$rootScope.Scope $broadcast and $on

Or you put the content of your BrandListController in your MainController

3

Thank you, I put the logic inside the main controller, it works now