Angular Js ng-click not firing?`

Question

Hey all I'm having the weirdest issue getting ng-click to fire in my angular app.

Here's what I'm dealing with:

<div class="popup" id="perks-popup" ng-if="perksPopup === true">

    <div class="popup-bkg" ng-click="perksPopup = false;"></div>

    <div class="popup-content">
        <div class="popup-close" ng-click="perksPopup = false;">

            <img class="scalableImg" src="img/icons/close-blue.png" alt="">

        </div>
    </div>

</div>

and here is the base controller:

(function(){

    "use strict";

    Caribou2015.controller('BaseController', ['$rootScope', '$scope', 'Dates', function($rootScope, $scope, Dates){
        console.log('base controller init');

        //overlay and popup states
        $rootScope.welcomePopup = false;
        $rootScope.perksPopup = true;
        $rootScope.calPopup = false;


    }]);
})();

with this setup what I expect to happen is that the perks popup div will show up and when I click its background or the popup-close div, it gets removed by ngIf. Well it shows up just fine but clicking the close or the background does nothing. I even added a $rootScope.$watch on the variable to see if it changes and I get nothing. It seems like the ng click event isn't firing at all. Is there something I'm missing?

Any help would be awesome thanks!

-Kobby

Answer 1

Don't pollute $rootScope its bad pattern, do use service/factory while you wanted to share data between various component.

ng-if does create a prototypically inherited child scope on that element valued data type will not get there value populated in that div , you need to add $parent. to access scope variable, before an As you are using scope variable ng-if that is causing an issue you need to follow the dot rule while declaring model, suppose that would be $scope.model={} in scope then assign all the properties and use it on html.

Markup

<div class="popup" id="perks-popup" ng-if="model.perksPopup === true">

    <div class="popup-bkg" ng-click="model.perksPopup = false;"></div>

    <div class="popup-content">
        <div class="popup-close" ng-click="model.perksPopup = false;">

            <img class="scalableImg" src="img/icons/close-blue.png" alt="">

        </div>
    </div>

</div>

Controller

$scope.model = {};
$scope.model.perksPopup = true;