JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<h4>Angular-xeditable Checkbox (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
  
     <table class="table table-striped table-bordered table-list">
                                                    <thead>
                                                        <tr>
                                                           
                                                            <th style="width: auto">
                                                                <a href=""  >Country</a>
                                                            </th>
                                                            <th style="width: auto">
                                                                <a href=""  >State</a>
                                                            </th>
                                                            <th style="width: auto">
                                                                <a href="" >City</a>
                                                            </th>
                                                            
                                                        </tr>
                                                    </thead>
    <tr ng-repeat="Manage_contactdetail in contactdetail  " ng-class-odd="'odd'">
                                                    
        
               <td>
               	
                                          
                                                                                                             <span   editable-select="country"
                ...

CSS

div[ng-app] { margin: 50px; }

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter) {
  $scope.contactdetail = [{_id:'1', Number: 'true' }, {_id:'2', Number: 'false'},
	 {_id:'2', Number: 'true'}];
   
   $scope.country = {};
    $scope.state = {};
    $scope.city = {};
    var allCountries = [{
        Id: 1,
        CountryName: "USA"
    }, {
        Id: 2,
        CountryName: "Australia"
    }];
    var allStates = [{
        Id: 1,
        StateName: "Washington",
        CountryId: 1
    }, {
        Id: 2,
        StateName: "New York",
        CountryId: 1
    }, {
        Id: 3,
        StateName: "Queensland",
        CountryId: 2
    }];
    var allCities = [{
        Id: 1,
        CityName: "Washington DC",
        StateId: 1
    }, {
        Id: 2,
        CityName: "New York City",
        StateId: 2
    }, {
        Id: 3,
        CityName: "Brisbane",
        StateId: 3
    }];

    $scope.countries = allCountries;

    $scope.$watch('country', function () {
        $scope.states = allStates.filter(function (s) {
            return s.CountryId == $scope.country.Id;
        });
        $scope.city = {};
        $scope.state = {};
        $scope.cities = [];
    });

    $scope.$watch('state', function () {
        $scope.cities = allCities.filter(function (c) {
            return c.StateId == $scope.state.Id;
        });
        $scope.city = {};
    });
});