How to make a On/Off button in Ionic

I need to put a button in Ionic that stays activated after it's been pressed, and only deactivates after it's been pressed again.

There is a similar question but it only applies to icon buttons. (How to adding navigation bar button having ionic-on/ ionic-off functionality).

EDIT

I can't use a toggle button, it is required to be a regular looking buttom (in this case an Ionic button-outline) that stays active when pressed.

Here is some code:

<div class="botones">
    <div class="row">
      <div class="col">
        <button class="button button-outline button-block button-positive">
          Promociones
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-energized" >
          Aprobados
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-assertive" >
          Alerta
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-balanced" >
          ATM
        </button>
      </div>
    </div>
</div>

As you can see is a simple horizontal array of buttons. They suppose to act as filters for a message inbox, so they have to stay pressed (one at the time at most) as the filter is active. Like a tab but not quite.

The main question is, how can I access the activated state of the button so I can mantain it activated.

You may find toggle button useful. Here's the official link to this example:

<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle> 

edit: Here's a demo from Codepen

and the code pasted here:

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {

});
<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">
    <title>
      Toggle button
    </title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    
  </head>
  <body class="padding" ng-controller="MyCtrl">
    
    <button class="button button-primary" ng-model="button" ng-click="button.clicked=!button.clicked" ng-class="button.clicked?'button-positive':'button-energized'">
      Confirm
    </button>
  </body>
</html>

If you are use angular, You can use ng-if

For example :

<div ng-if="active == 1">
  <!-- your code here -->
</div>

<div ng-if="active == 0">
  <!-- your code here -->
</div>

Read more :

ngIf

sample code