Q:

Angular ng-model on repeatable DOM elements

Is it possible to define ng-model scope in Angular with HTML markup alone?
My markup:
<section>
    <button ng-click="boxOpen = !boxOpen">Open/Close</button>
    <div ng-show="boxOpen">Stuff in here</div>
</section>

<section>
    <button ng-click="boxOpen = !boxOpen">Open/Close</button>
    <div ng-show="boxOpen">Other stuff in here</div>
</section>

The problem with the above is 'boxOpen' is being globally interpreted by both, so clicking either of the buttons will show/hide both divs at the same time.
Anything helps, thanks!

A:

If you define 2 different controller, you will get two different scope
<section ng-controller="ctrl1">
     <button ng-click="boxOpen = !boxOpen">Open/Close</button>
     <div ng-show="boxOpen">Stuff in here</div>
</section>

<section ng-controller="ctrl2">
    <button ng-click="boxOpen = !boxOpen">Open/Close</button>
    <div ng-show="boxOpen">Other stuff in here</div>
</section>

You may also make a directive
html
<section my-show-hide-dir>
     <button ng-click="boxOpen = !boxOpen">Open/Close</button>
     <div ng-show="boxOpen">Stuff in here</div>
</section>

<section my-show-hide-dir>
    <button ng-click="boxOpen = !boxOpen">Open/Close</button>
    <div ng-show="boxOpen">Other stuff in here</div>
</section>

JS
     app.directive("myShowHideDir",
    function() {
        return {
            restrict: 'A',
            controller: ['$scope', '$element', '$attrs',
                function($scope, $element, $attrs) {
                    $scope.boxOpen = false;
                }
            ]
        }

    }
);

