How to proper ng-repeat nested objects

Question

I am trying to ng-repeat the collection but I can't get it right.

Note that I need to get the deptData where assigned to st-safe-src because there is something I want to try and I need it to test if it is working. Thanks

Follow up question if it is solved:

The thing that I want to achieve is make the select filter work on multiple tables. As you can see the table is repeated depends on dept in deptData.

I am getting an error: Error: [ngRepeat:iidexp]

Object

[
   {
      dept: "CASHE",
      data: [
          {
              violationName: "No ID"
          },
          {
              violationName: "Cutting class"
          },
          {
              violationName: "Improper Uniform"
          }
      ]
   },
   {
       dept: "CBITE",
       data: [
           {
               violationName: "No ID"
           },
           {
               violationName: "No ID"
           }
       ]
  },
  {
       dept: "CCJE",
       data: [
          {
               violationName: "Improper Uniform"
          }
       ]
   }
]

HTML

<table ng-repeat="dept in deptData"
   st-set-filter="customFilter"
   st-table="printAsTableDataDisplay"
   st-safe-src="deptData"
   class="table table-striped">

   <thead>
      <th>
          <select st-search="violationName">
             <option value="">All</option>
             <option ng-repeat="row.violationName for row in deptData | unique:'violationName'"
             value="{{row.violationName}}">{{row.violationName}}</option>
          </select>
      </th>
   </thead>
</table>

Answer 1

ng-repeat follows the structure of your json array.

In the first loop you declare dept that represents each object of the array.

This object contains 2 properties: dept and data

data being the array you want to loop on the second ng-repeat. Which gives dept.data

function Main($scope) {
  $scope.deptData = [
   {
      dept: "CASHE",
      data: [
          {
              violationName: "No ID"
          },
          {
              violationName: "Cutting class"
          },
          {
              violationName: "Improper Uniform"
          }
      ]
   },
   {
       dept: "CBITE",
       data: [
           {
               violationName: "No ID"
           },
           {
               violationName: "No ID"
           }
       ]
  },
  {
       dept: "CCJE",
       data: [
          {
               violationName: "Improper Uniform"
          }
       ]
   }
];
}

angular.module('test', []);
angular.module('test')
  .controller('Main', Main);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="test">
  <div ng-controller="Main">
<table ng-repeat="dept in deptData"
   class="table table-striped">
   <thead>
      <th>
          <select st-search="violationName">
             <option value="">All</option>
             <option ng-repeat="row in dept.data"
             value="{{row.violationName}}">{{row.violationName}}</option>
          </select>
      </th>
   </thead>
</table>
  </div>
</div>