AngularJS - Show different data based on JSON response

I'm building an app using AngularJS and Ionic framework, where I get to show a list of data containing several different sub categories per a list-item as shown below.

http://i.stack.imgur.com/H80t5.png

My problem is that there can be different sub categories to be shown based on the accoount type (Current Account, Savings Account etc) and hence need a dynamic implementation.

Eg: for Current & Savings account types, the subfields are; -current balance -available balance

but for leasing & insurance its something else. - contract no - policy no

all that above is shown by checking the param account_type.

so far what I have is this.

HTML

<div ng-repeat="user in blance" >
    <div style="margin: 0px;" class="row" >

        <h5 class="col account-type" style="text-align: left;" >{{ user.accountType | uppercase}}</h5>
        <h5 class="col account-number" style="text-align: right;"><span style="font-size:16px; color:#ffffff;">|</span>Acc: {{ user.accountNumber }}</h5>

      </div>
      <div style="margin: 0px;" class="row" >

                <h5 class="col balance-type" style="text-align: left; padding-left:5%; font-size:14px;" ><span style="font-size:20px; color:#ffffff;">|</span>Current Balance </h5>

             <h5 class="col account-balance" style="text-align: right;font-size:18px; "><span style="font-size:14px;">LKR </span>{{ user.currentBalance | CustomCurrency:'' }}<span style="font-size:14px;"> {{ user.currentBalance | CustomCurrencydecimal }}</span> </h5>

      </div>
      <div style="margin: 0px;" class="row" >

                <h5 class="col balance-type" style="text-align: left; padding-left:5%; font-size:14px;" ><span style="font-size:20px; color:#ffffff;">|</span>Available Balance </h5>

                <h5 class="col account-balance" style="text-align: right;font-size:18px; "><span style="font-size:14px;">LKR </span>{{ user.availableBalance | CustomCurrency:'' }}<span style="font-size:14px;"> {{ user.availableBalance | CustomCurrencydecimal }}</span> </h5>


      </div>
      <hr>
    </div>

I want to know whether there is an AngularJS way to handle this? Please help.

I have accomplished this many times by placing all related HTML elements inside a container DIV and using ng-show.

For your example, I would create a DIV for current and savings account types (ng-show="user.account_type===current||user.account_type===savings") and another DIV for all leasing and insurance account types (ng-show="user.account_type===leasing||user.account_type===insurance").

If the logic gets more complicated than a small JavaScript snippet then I move it into a $scope method such as isCurrentOrSavingsAccount().