Validation ModelState Angular JS and Web API Core

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="validationApp">

  <div ng-controller="validationController">

    <form name="restaurantForm" class="form">

      <div class="form-group" ng-class="{'has-error': controller.parsedModelState.Name != null}">
        <label>Restaurant Name</label>
        <input type="text" class="form-control" ng-server-validate="Name" ng-model="controller.restaurantModel.name">
        <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState.Name"> {{errorMessage}} </span>
      </div>

      <div class="form-group" ng-class="{'has-error': controller.parsedModelState.Address != null}">
        <label>Address</label>
        <input type="text" class="form-control" ng-server-validate="Address" ng-model="controller.restaurantModel.address">
        <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState.Address"> {{errorMessage}} </span>
      </div>

      <h3>Nested Object</h3>
      <div class="form-group" ng-class="{'has-error': controller.parsedModelState['TestModel.TestName'] != null}">
        <label>TestModel.TestName</label>
        <input type="text" class="form-control" ng-server-validate="TestModel.TestName" ng-model="controller.restaurantModel.testModel.testName">
        <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState['TestModel.TestName']"> {{errorMessage}} </span>
      </div>


      <h3>Many Array/List</h3>

      <ul class="list-unstyled">
        <li ng-repeat="item in controller.restaurantModel.testMany">
          <div class="form-group" ng-class="{'has-error': controller.parsedModelState['TestMany[' + $index + '].ManyItem'] != null}">
            <label>Many Item {{$index}}</label>
      ...

TypeScript

class CreateRestaurantController {

      static $inject = ["$scope"];

      restaurantModel: any;
      modelState: any;
      parsedModelState: any;
      testModelState: any;


      constructor($scope) {
        this.scope = $scope; // create a local copy of the $scope
        this.scope.controller = this; //put controller reference in this.scope.controller

        this.restaurantModel = {
          name: "Dawood",
          testModel: {},
          testMany: [{
            ManyItem: "I have a Value"
          }, {}]
        };
        this.modelState = null;
        this.parsedModelState = {};

        this.testModelState = JSON
          .parse('{"Address":["This field is required"],"Description":["This field is required"],"TestModel.TestName":["This field is required"],"TestMany[1].ManyItem":["Many Item is required"]}');

        console.log(this.testModelState);
      }


      testValidation() {

        this.modelState = this.testModelState;
        //Normally modelStae  will be return from server

        // Submit to Server

        //this.apiService.post("/api/RestaurantDashboard/GetTestValidation",
        //    null, this.restaurantModel,
        //    response => {
        //        console.log(response);
        //    },
        //    response => {
        //        this.modelState = response.data;
        //    });
      }
    }


    class ServerValidationDirective implements ng.IDirective {
      constructor() {}
      restrict: "A";
      require: "ngModel";

      link = function(scope, element, attrs, ctrl) {

        scope.$watch("controller.modelState", () => {

          let modelState = scope.controller.modelState;

          console.log(modelState);

          if (modelState == null) return;

          let state = modelState[attrs.ngServerValidate];

          if (state) {
            // Server Errors exist for the ngServerValidate
            scope.controller.parsedModelState[attrs.ngServerValidate] = state;
          } else {
     ...