angularjs - Why is my ng-hide / show not working with my ng-click? -

i want show elements contain displaycategory.name ng-click above it, it's not working expected.

.divider-row       .row-border(ng-hide="showme")         .row.row-format           .col-xs-12.top-label             find stand         %hr.profile         .row.labelrow           .col-xs-12             %ul               %li(ng-repeat='category in service.categories')                 .clear.btn.category(ng-click='thiscategory(category) ; showme = true') {{category.name}}        .divider-row       .row-border(ng-show="showme")         .row.row-format           .col-sm-12.col-md-12.top-label.nopadleft             think {{displaycategory.name}} 

i cannot run code verify, think problem binding property showme should replaced object status.showme.

for example, define $scope.status = { showme: false}; outside ng-repeat (in controller maybe).

please check working demonstration: http://jsfiddle.net/jx854d3y/1/

---

explanations:

ng-repeat creates child scope each item. child scope prototypical inherits parent scope. in case, primitive showme assigned child scope. while use outside ng-repeat, tries value parent scope, undefined. why not working.

basic rule is: use object, instead of primitive types, binding.

for more details, please refer to: https://github.com/angular/angular.js/wiki/understanding-scopes