angularjs - Onclick Button Change AngularUI -

i'm trying make 6 buttons selectable. i'm having trouble adding more two. third button selecting other buttons , buttons deselecting when clicked twice. undesired. it's mess. can me sort out? here's code:

    <div ng-app="plunker">         <div ng-controller="mainctrl">             <button type="button" class="btn" ng-class="{'btn-primary':isuploadactive}" ng-click="toggleactive1()">upload</button>              <button type="button" class="btn" ng-class="{'btn-primary':isdownloadactive}" ng-click="toggleactive2()">download</button>                 </div>         </div>  var app = angular.module('plunker', []); app.controller('mainctrl', function($scope) {     $scope.button1active = false;     $scope.button2active = false;         $scope.button3active = false;             $scope.button4active = false;                 $scope.button5active = false;                     $scope.button6active = false;      $scope.toggleactive1 = function() {         if($scope.button2active) {             $scope.button2active = !$scope.button2active;         }         $scope.button1active = !$scope.button1active;     };      $scope.toggleactive2 = function() {             if($scope.button1active) {             $scope.button1active = !$scope.button1active;         }         $scope.button2active = !$scope.button2active;     };   $scope.toggleactive3 = function() {             if($scope.button3active) {             $scope.button3active = $scope.button3active;         }         $scope.button2active = !$scope.button2active;          $scope.button1active = !$scope.button1active;           $scope.button4active = !$scope.button4active;            $scope.button5active = !$scope.button5active;             $scope.button6active = !$scope.button6active;     }; });    <div id="contentdiv">     <div ng-app="plunker">     <div ng-controller="mainctrl">         <button type="button" class="btn" ng-class="{'btn-primary':button1active}" ng-click="toggleactive1()">upload</button>          <button type="button" class="btn" ng-class="{'btn-primary':button2active}" ng-click="toggleactive2()">download</button>                  <button type="button" class="btn" ng-class="{'btn-primary':button3active}" ng-click="toggleactive3()">purchased</button>        </div>     </div> 

yikes! bit messy. made fiddle seems want: http://jsfiddle.net/qwah3/

basically give controller 1 scoped object holds active button, , each button checks against value:

function myctrl($scope) {   $scope.active = { val : '' };   $scope.activate = function(buttonval) {     $scope.active.val = buttonval;   }; } 

that means each button can this:

<button type="button" class="btn" ng-class="{'btn-primary':active.val == 'download'}"         ng-click="activate('download')">download</button> 

you turn button directive make easier.

hope helped!