AngularJS equivalent to jQuery toggle show/hide a section

Question

First of, yes I've tried googling this but it's still hard to find information about AngularJS.

I want to preform a simple task of opening sections based on what button is pushed in the form. I want only one section to be open at anytime and maybe a default one (haven't decided). It would also be nice if the button you click will be classed "btn-primary" for bootstrap. So this is the html

<form>
    <input type="button" id="show-section1" value="Section 1" />
    <input type="button" id="show-section2" value="Section 2" />
    <input type="button" id="show-section3" value="Section 3" />
</form>
<section id="section1">blah</section>
<section id="section2">blah2</section>
<section id="section3">blah3</section>

In jQuery I would do something like this (simplified and not the best solution just to explain):

$('section').hide();
$('#show-section1').click(function() {
    $('section').hide();
    $('#section1').show();
});
etc

I've done this once before but I can't remember how, I remember it was very few lines of code though.

Answer 1

If you just need one at a time, you can use this : http://jsfiddle.net/jHhMv/3/

JS :

'use strict';

var App=angular.module('myApp',[]);

function Ctrl($scope){
    var section = 1;

    $scope.section = function (id) {
        section = id;   
    };

    $scope.is = function (id) {
        return section == id;
    };
}

HTML :

<div ng-controller="Ctrl">
<form>
    <input type="button" id="show-section1" value="Section 1" ng-click="section(1)" ng-class="{'btn-primary': is(1)}" />
    <input type="button" id="show-section2" value="Section 2" ng-click="section(2)" ng-class="{'btn-primary': is(2)}" />
    <input type="button" id="show-section3" value="Section 3" ng-click="section(3)" ng-class="{'btn-primary': is(3)}" />
</form>
<section id="section1" ng-show="is(1)">blah</section>
<section id="section2" ng-show="is(2)">blah2</section>
<section id="section3" ng-show="is(3)">blah3</section>
</div>

Answer 2

Take a Look http://jsfiddle.net/mahbub/jHhMv/

<div ng-controller="Ctrl">
<form>
    <input type="button" id="show-section1" value="Section 1" ng-click="section1=!section1" />
    <input type="button" id="show-section2" value="Section 2" ng-click="section2=!section2" />
    <input type="button" id="show-section3" value="Section 3" ng-click="section3=!section3" />
</form>
<section id="section1" ng-show="section1">blah</section>
<section id="section2" ng-show="section2">blah2</section>
<section id="section3" ng-show="section3">blah3</section>
</div>


'use strict';

var App=angular.module('myApp',[]);

function Ctrl($scope){

}