Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <ul class="list-unstyled" ng-repeat="cat in catSubCat">
    <li>
        <label>
            <input type="checkbox" name="categories" id="category_{{cat.categoryId}}" ng-model="cat.categoryChk" ng-change="categoryCheckBox(cat, $index)" readonly><span class="gap">{{cat.categoryName}}</span>
        </label>
        <ul class="list-unstyled" ng-repeat="subCat in cat.subCategory">
            <li>
                <label>
                    <input type="checkbox" name="subcategories" id="sub_category_{{subCat.subCategoryId}}" ng-model="subCat.categoryChk" ng-change="subCategoryCheckBox(cat, subCat, $index)"><span class="gap">{{subCat.subCategoryName}}</span></label>
            </li>
        </ul>
    </li>
</ul>
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.catSubCat = [
  {
    "categoryId": 1,
    "categoryName": "Men",
    "subCategory": [
      {
        "subCategoryId": 1,
        "subCategoryName": "Footwear"
      },
      {
        "subCategoryId": 3,
        "subCategoryName": "Cloths"
      }
    ]
  },
  {
    "categoryId": 2,
    "categoryName": "Women",
    "subCategory": [
      {
        "subCategoryId": 2,
        "subCategoryName": "Footwear"
      }
    ]
  },
  {
    "categoryId": 3,
    "categoryName": "Kids",
    "subCategory": []
  }
];

$scope.categoryCheckBox = function(cat, index) {
	console.log('category', cat, index);
  console.log('checked', cat.categoryChk);

}

$scope.subCategoryCheckBox = function(cat, subcat, index) {
	console.log('subcategory', cat, subcat, index);
  console.log('checked', subcat.categoryChk);

}
}