AngularJS : ng-show with multiple checkboxes

Question

I've used the following solution (accepted answer) to create a new directive for my list of checkboxes: How can I get angular.js checkboxes with select/unselect all functionality and indeterminate values? and I want to show the following buttons block when at least one item is selected:

<div class="btn-group pull-right mrr5" data-ng-show="masterChecked">

    <button class="btn btn-danger"><i class="icon-trash"></i> Remove selected</button>
    <button class="btn btn-info"><i class="icon-download icon-white"></i> Export selected as .csv</button>

</div>

As you can see I'm using the 'data-ng-show' attribute with the 'masterChecked' assigned to it, which is set within the controller of the directive based on the status of the 'master':

<input type="checkbox" data-ng-model="master" data-ng-change="masterChange()">

but for some reason whether I check it or not - the buttons do not show up. Any idea what I might be doing wrong?

Here's the fiddle : http://jsfiddle.net/scabro/Ahe2X/10/

Answer 1

it seems you are just trying to check the value of another $scope variable ( the one from the directive ) in your main controller

In order to have the same one, you can pass it as another attribute in your directive

I let you check this fiddle : http://jsfiddle.net/DotDotDot/Ahe2X/22/

I just modified 3 little points :

First, I created the masterChecked value in the main controller :

cmdApp.controller('UserController', function($scope) {
    $scope.masterChecked=false;
    ....

we add the masterChecked value in the directive's scope, in order to have the same variable everywhere

scope: { checkboxes: '=', masterChecked:"=" },

then, we can call the directive with another attribute :

<three-state-checkbox checkboxes="users" class="select-all-cb" master-checked="masterChecked">

And now, you are manipulating the masterChecked variable from your main controller in your directive, and it works :)

Answer 2

Try this fiddle.

<div class="btn-group pull-right mrr5" data-ng-show="display">

$scope.cbChange = function () {
    $scope.display = !$scope.display;
}

Let me know if that works for you or not, I can update it accordingly.