<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    
  </head>
  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Blank Starter</h1>
    </ion-header-bar>

    <ion-pane class="dash">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
        <a id="calcul"  nav-direction="back" href="#/app/result" class="button button-block button-positive">
          <span >حساب</span>
        </a>
        <ion-list class="list" id="waratha-list">
          <ion-item class="item item-checkbox" ng-init="wareth = {lbl: 'إبن',selected: false,number: 0,nasib:'كل المال'}">
            <div class="row">
              <div class="checkbox-container col-80">
                <label class="checkbox">
                  <input type="checkbox" class="assertive-border" ng-model="wareth.selected" ng-checked="wareth.number > 0" ng-change="wareth.number = 1" ng-disabled="wareth.desable">
                </label>
                <span >{{wareth.lbl}}</span>
              </div>

              <div class="col col-20 col-center" id="wareth-number">
                <a class="" ng-click="wareth.number = wareth.number -1; ">
                  -
                </a>
                <span>{{wareth.number}}</span>
                <a class="" ng-click="wareth.number = wareth.number +1;" >
                  +
                </a>
              </div>

            </div>
            <!--<button class="button button-positive">-->
            <!--<i class="icon ion-ios7-telephone"></i>-->
            <!--</button>-->
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-pane>

  </body>
</html>

body{
    direction: rtl;
}
.dash ion-item span {
    margin-right: 35px;
    font-size: 1.8em;
}

#waratha-list label{
    width: 60%;
}
#waratha-list .nasib{
    font-size: 0.8em;
}
#wareth-number span{
    font-size: 2em;
    margin: auto 10px;
}
#wareth-number a {
    border: 0px;
    font-size: 2em;
}
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
 
  
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.