Angular ng-click not working

Question

I have the following code:

<div class="row">
    <div ng-repeat="stat in stats"> 
        <div class="col-lg-3 col-md-6 col-sm-6" ng-click="hideShow=(hideShow ? false : true); vm.charts(stat.jobId)">
            <div class="card card-stats">
                <div class="card-header" data-background-color="orange">
                    <i class="material-icons">content_copy</i>
                </div>
                <div class="card-content">
                    <p class="category">{{stat.market}} {{stat.line}} </p>
                    <h3 class="title">{{stat.considered}}
                        <small>Rec</small>
                    </h3>
                </div>
                <div class="card-footer">
                    <div class="stats">
                        <i class="material-icons">date_range</i> {{stat.updated_at}} 
                </div>
            </div>
        </div>
    </div>
</div>
<div ng-if="hideShow">
    test
    <div ng-repeat="chart in charts">
        {{chart}}
        {{chart.data.jobId}}
        {{chart.jobId}} {{chart.line}} {{chart.market}}
    </div>
</div>

The problem is that the div ng-if="hideShow" never displays on the screen. If I place the last piece of code <div ng-if="hideShow"></div> inside the first <div ng-repeat="stat in stats"> then it will display... But I want it to be a complete unrelated div.

How can I have an unrelated div display once the following div is clicked:

<div class="col-lg-3 col-md-6 col-sm-6" ng-click="hideShow=(hideShow ? false : true); vm.charts(stat.jobId)">

Following the controller for this:

// Keep things clean and sane
(function () {
    "use strict";

    angular
        .module('sigmaApp')
        .controller('statisticsController', statisticsController);

    function statisticsController($scope, $state, $location,$document, $mdToast, recordService) {

        // List out our members & methods
        var vm = this;

        //my methods
        vm.closeView = closeView;
        vm.showToast = showToast;
        vm.charts = charts;
        $scope.jobs = [];
        $scope.stats = [];
        $scope.charts = [];
        $scope.hideShow = false;

        recordService.getJobs().then(function(jobs){

            for(var i = 0; i<jobs.data.length; i++){ 
                if(jobs.data[i].type === 'parent')
                    $scope.jobs.push(jobs.data[i]);
            }

            for(var i=0; i<$scope.jobs.length; i++){
                recordService.stats($scope.jobs[i].id).then(function(stats){
                    $scope.stats.push(stats.data[0]);
                });
            }

            console.log($scope.stats);

            for(var i=0; i<$scope.stats.length; i++){
                console.log($scope.stats[i]);
            }

        }).catch(function(err){
            console.log(err);
        });

        function charts(id){
            console.log('build charts for job: '+id);
            var stat;
            for (var i=0; i<$scope.stats.length; i++){
                if ( $scope.stats[i].jobId == id){
                    stat = $scope.stats[i];
                }
            }
            $scope.charts = stat;
        }

        function closeView() {
            $state.go('app.records');
        }

        function showToast(message) {
            $mdToast.show(
                    $mdToast.simple()
                        .content(message)
                        .position('top, right')
                        .hideDelay(5000)
                ); // END toast.show
        } // END showToast

    } // END 

})(); // END iffy

Answer 1

The problem is you are setting your visibility of your div to a primitive type (boolean). Through the magic of prototypal inheritance, the scope value you are modifying via

ng-click="hideShow=(hideShow ? false : true)

is the child scope being created from the ng-repeat directive.

<div ng-repeat="stat in stats"> 

Therefore the value is being shadowed/hidden and you are not modifying the correct value. You can read more about it here. That is why the div will work hide/show when you move the div within the scope of ng-repeat, but it will not work outside the scope of ng-repeat.

To work around this you can utilize the '.' notation and stick your visibility to an object's property.

So in your controller you initialize a new object literal with the boolean flag.

 $scope.div = {};
 $scope.div.hideShow = false;

And then modify your click event to modify this object

 ng-click="div.hideShow = !div.hideShow"

and then modify your visibility via

<div ng-if="div.hideShow">
    test
    <div ng-repeat="chart in charts">
        {{chart}}
        {{chart.data.jobId}}
        {{chart.jobId}} {{chart.line}} {{chart.market}}
    </div>
</div>