Dynamic table generation in Angularjs, JSON to HTML Table using angular js

Dynamic table generation for any json data.

we can pass any json data it will. generate the table with out writing any code..

@{
    ViewBag.Title = "My details";
}

<script src="~/Scripts/js/angular.min.js"></script>
<form class="form-horizontal" ng-app="myApp" ng-controller="namesCtrl">
<fieldset>

    <legend>My Cases</legend>

       <script>
           angular.module('myApp', []).controller('namesCtrl', function ($scope) {
            
               $scope.TaskDetails = [
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'}
               ];
               $scope.orderByMe = function (x) {///  button click event
                   $scope.myOrderBy = x;
               }
           });
        </script>


       <div class="form-group">

                   
    <table  border="1">
        <thead>
            <tr>
                <td ng-repeat="(key,value) in TaskDetails [0]"> {{key}}</td>
                <td></td>
            </tr>


        </thead>
        <tbody>
            <tr ng-repeat="d in TaskDetails ">
                <td ng-repeat="(key,value) in d"> {{value}}</td>
                <td><a class="btn btn-primary" href="#"> select</a></td>
            </tr>

        </tbody>

    </table>
                </div>
    </fieldset>
    </form>