Dynamically check checkboxes for ng-show - angularjs

Question

I know how to do this with ng-repeat.
But I can't find a solution for this way.
I have 6 checkboxes, and when I check any of them they show (ng-show) one of 6 charts.
The problem is my backend sends me array for pre-checked checkboxes in this way with API.
graphs_config:"["graph.batteryVoltage","graph.internetUserCount","graph.usbAndWirelessCharging"]"
I get this with $promise and check if there is data for pre-checked charts
$scope.charts= userChartsFactory.get({ user: user_id });
$scope.charts.$promise.then(function(data) {
if (data.graphs_config.indexOf("graph.batteryVoltage") >= 0) {
$scope.graphBatteryVoltage = true;
}
if (data.graphs_config.indexOf("graph.internetUserCount") >= 0) {
$scope.graphInternetUserCount = true;
}
if (data.graphs_config.indexOf("graph.usbAndWirelessCharging") >= 0) {
$scope.graphUsbAndWirelessCharging = true;
}
});
And in HTML I make this
<div class="checkbox-inline">
<input type="checkbox" class="checkboxShowGraph" id="graph.batteryVoltage" value="battery_voltage" checklist-model="graph.graphBatteryVoltage" ng-checked="graph.graphBatteryVoltage" ng-model="graph.batteryVoltage" ng-change="addRemoveUserChart(graph.batteryVoltage, 'graph.batteryVoltage')"><label for="graph.batteryVoltage">{{'BATTERY_VOLTAGE' | translate}}</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="checkboxShowGraph" id="graph.internetUserCount" value="internet_user_count" checklist-model="graph.graphInternetUserCount" ng-checked="graph.graphInternetUserCount" ng-model="graph.internetUserCount" ng-change="addRemoveUserChart(graph.internetUserCount, 'graph.internetUserCount')"><label for="graph.internetUserCount">{{'INTERNET_USER_COUNT' | translate}}</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="checkboxShowGraph" id="graph.usbAndWirelessCharging" value="usb_and_wireless_charging" checklist-model="graph.usbAndWirelessCharging" ng-model="graph.usbAndWirelessCharging" ng-change="addRemoveUserChart(graph.usbAndWirelessCharging, 'graph.usbAndWirelessCharging')"><label for="graph.usbAndWirelessCharging">{{'CHARGING_COUNTER' | translate}}</label>
</div>
I check if value is true or false and with ng-checked I try to CHECK checkboxes in HTML but this not working, because checkboxes are not pre-checked in this way.

Answer 1

You can refer this working code.
Here Controller Code
$scope.data={
FirstCheckbox:true,
SecondCheckbox: false
}
Here is HTML
<label class="">
<li class="item item-checkbox checkbox-dark " >
Test1
<label class="checkbox" >
<input type="checkbox" ng-model="data.FirstCheckbox" >
</label>
</li>
</label>
<label class="">
<li class="item item-checkbox checkbox-dark " >
Test2
<label class="checkbox" >
<input type="checkbox" ng-model="data.SecondCheckbox" >
</label>
</li>
</label>