when checkbox = true

Question

I have been trying to work out my problem but I cant work out what to do.

My JSFIDDLE has a dropmenu with a building level. Each building level has a value. I have a total value working, but I need to have a destroyed total. I have added a checkbox to use if its destroyed, but i cant work out how to do the subtotal. i did think of ng-if but cant work how to use it with what I need, but I welcome any help. I need subTotalOP to equal OP when checked is true, so I can add all the armour that is destroyed separately from the total

var appBubble = angular.module('myExample', []);

function myCTRL($scope) {
  $scope.myOptionsOP = [{
    "armour": 1000,
    "label": "1"
  }, {
    "armour": 2000,
    "label": "2"
  }, {
    "armour": 4000,
    "label": "3"
  }, {
    "armour": 8000,
    "label": "4"
  }, {
    "armour": 16000,
    "label": "5"
  }, {
    "armour": 32000,
    "label": "6"
  }, {
    "armour": 64000,
    "label": "7"
  }, {
    "armour": 750000,
    "label": "8"
  }];

  $scope.myOptionsWH = [{
    "armour": 100,
    "label": "1"
  }, {
    "armour": 600,
    "label": "2"
  }, {
    "armour": 1100,
    "label": "3"
  }, {
    "armour": 1600,
    "label": "4"
  }, {
    "armour": 2100,
    "label": "5"
  }, {
    "armour": 2600,
    "label": "6"
  }, {
    "armour": 3100,
    "label": "7"
  }, {
    "armour": 3600,
    "label": "8"
  }, {
    "armour": 4100,
    "label": "9"
  }, {
    "armour": 4600,
    "label": "10"
  }, {
    "armour": 5100,
    "label": "11"
  }, {
    "armour": 9277,
    "label": "12"
  }, {
    "armour": 17280,
    "label": "13"
  }, {
    "armour": 415000,
    "label": "14"
  }];

  $scope.myOptionsLP = [{
    "armour": 450,
    "label": "1"
  }, {
    "armour": 788,
    "label": "2"
  }, {
    "armour": 1378,
    "label": "3"
  }, {
    "armour": 2412,
    "label": "4"
  }, {
    "armour": 4221,
    "label": "5"
  }];

  $scope.myOptionsSY = [{
    "armour": 2000,
    "label": "1"
  }, {
    "armour": 4000,
    "label": "2"
  }, {
    "armour": 6000,
    "label": "3"
  }];

  $scope.myOptionsDK = [{
    "armour": 550,
    "label": "1"
  }, {
    "armour": 1200,
    "label": "2"
  }, {
    "armour": 1850,
    "label": "3"
  }, {
    "armour": 2500,
    "label": "4"
  }, {
    "armour": 3150,
    "label": "5"
  }, {
    "armour": 3800,
    "label": "6"
  }, {
    "armour": 4450,
    "label": "7"
  }, {
    "armour": 5100,
    "label": "8"
  }, {
    "armour": 5750,
    "label": "9"
  }, {
    "armour": 6400,
    "label": "10"
  }, {
    "armour": 7050,
    "label": "11"
  }, {
    "armour": 9150,
    "label": "12"
  }];


};

table,
th,
tr,
td,
p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table border="1" ng-app="myExample" ng-controller="myCTRL">
  <tr>
    <td align=middle>Building</td>
    <td align=left>Level</td>
    <td align=middle>Armour</td>
    <td align=left>Destroyed</td>
    <tr>
      <td align=left width=100>Outpost:</td>
      <td>
        <select style="width: 40px" ng-model="OP" ng-options="value.armour as value.label for value in myOptionsOP"></select>
      </td>
      <td align=left width=200>Base Armour: {{OP}}</td>
      <td align=middle width=25>
        <input type="checkbox" ng-model="subTotalOP">
      </td>
      <tr>
        <td align=left width=100>Warehouse:</td>
        <td>
          <select style="width: 40px" ng-model="WH1" ng-options="value.armour as value.label for value in myOptionsWH"></select>
        </td>
        <td align=left width=200>Base Armour: {{WH1}}</td>
        <td align=middle width=25>
          <input type="checkbox" ng-model="subTotalWH1">
        </td>
        <tr>
          <td colspan="4" align=left width=300>
            <br/>
            <br/><b>Total Of Destroyed Buildings: {{subTotalOP+subTotalWH1}}</b>
          </td>
          <tr>
            <td colspan="4" align=left width=300>
              <br/><b>Total of All Buildings: {{OP+WH1}}</b>
            </td>
</table>

Answer 1

Updated:

I believe this is what you need:

{{(subTotalOP === true ? OP : 0)   + (subTotalWH1 === true ? WH1 : 0)}}

Actually, this is not the good approach, you should do the logic in the javascript. But anyway, hope this can sort your problem.

Checked new demo: https://jsfiddle.net/dLtecsbj/10/

Answer 2

You can use ng-init to initialize value to default value.

Issue is when you do subTotalOP+subTotalWH1, if subTotalWH1 is undefined, it returns value of first operand(true/false). initializing it will also solve it, but you should initialize both.

<input type="checkbox" ng-init="subTotalOP=false" ng-model="subTotalOP">

Updated JSFiddle