Make Fields disabled based on DropDownList Selection using AngularJS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("MyApp", []);
    app.controller("MyController", function ($scope, $filter) {
        $scope.Details = [{ CName: "Fromdate", CType: 'audi', FromTable: '', DisplayCName: '', ValueCName: '', Date: '' },
                            { CName: "Todate", CType: 'audi', FromTable: '', DisplayCName: '', ValueCName: '', Date: ''}];
        $scope.TypeChange = function (cType, cName) {
            for (var i = 0; i < $scope.Details.length; i++) {
                if ($scope.Details[i].CName == cName) {
                    if (cType == "Dropdown") {
                        $scope.Details[i]["isDisabledDate"] = true;
                        $scope.Details[i]["isDisabledFromTable"] = false;
                        $scope.Details[i]["isDisabledDisplayCName"] = false;
                        $scope.Details[i]["isDisabledValueCName"] = false;
                    } else if (cType == "DatePicker") {
                        $scope.Details[i]["isDisabledFromTable"] = true;
                        $scope.Details[i]["isDisabledDisplayCName"] = true;
                        $scope.Details[i]["isDisabledValueCName"] = true;
                        $scope.Details[i]["isDisabledDate"] = false;
                    } else if (cType == "Textbox") {
                        $scope.Details[i]["isDisabledFromTable"] = true;
                        $scope.Details[i]["isDisabledDisplayCName"] = true;
                        $scope.Details[i]["isDisabledValueCName"] = true;
                        $scope.Details[i]["isDisabledDate"] = true;
                    } else {
                        $scope.Details[i]["isDisabledFromTable"] = false;
                        $scope.Details[i]["isDisabledDisplayCName"] = false;
                        $scope.Details[i]["isDisabledValueCName"] = false;
                        $scope.Details[i]["isDisabledDate"] = false;
                    }
                }
            }
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Cname</th>
            <th>Ctype</th>
            <th>From Table</th>
            <th>DisplayCName</th>
            <th>ValueCName</th>
            <th>Date</th>
        </tr>
        <tbody ng-repeat="detail in Details">
            <tr>
                <td>{{detail.CName}}</td>
                <td>
                    <select ng-model="detail.CType" class="form-control" ng-change="TypeChange(detail.CType,detail.CName)">
                        <option value="audi" selected>Select value</option>
                        <option value="Dropdown">Dropdown</option>
                        <option value="Textbox">Textbox</option>
                        <option value="DatePicker">DatePicker</option>
                    </select>
                </td>
                <td><input type="text" class="form-control" ng-model="detail.FromTable" ng-disabled="detail.isDisabledFromTable" /></td>
                <td><input type="text" class="form-control" ng-model="detail.DisplayCName" ng-disabled="detail.isDisabledDisplayCName" /></td>
                <td><input type="text" class="form-control" ng-model="detail.ValueCName" ng-disabled="detail.isDisabledValueCName" /></td>
                <td>
                    <select ng-model="detail.Date" class="form-control" ng-disabled="detail.isDisabledDate">
                        <option value="Today">Today</option>
                        <option value="Lastday">Lastday</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</div>