<table class="table table-bordered table-hover table-condensed">
        <tr style="font-weight: bold">
            <td style="width:5%">No.</td>
            <td style="width:20%">Name</td>
            <td style="width:10%">Gender</td>
            <td style="width:30%">Profile photo</td>
            <td style="width:20%">Category</td>
            <td style="width:30%">Action</span>
            </td>
        </tr>
        <tr ng-repeat="user in users">
            <td>{{$index+1}}</td>
            <td>
                <span editable-text="user.name" e-name="name" onbeforesave="checkName($data, user._id)" ng-model="userName" e-form="rowform" e-required>
                      {{ user.name}}
                    </span>
            </td>
            <td>
            <span editable-select="user.gender" ng-model="gender" e-name="gender" e-form="rowform" e-ng-options="s.value as s.text for s in genders">
                  {{ showGender(user) }}
            </span>

            </td>

            <!-- ng-show="tableform.$visible" -->
            <td class="text-center" >
                    <img ng-src="/api/media/{{user.media_id}}" alt="No Image" style="margin-bottom:20px;width:100%;">
                    <a class="btn btn-success" ui-sref="media({_id: user._id })" style="border: .0625rem solid transparent;margin: 10px 0px;padding: .465rem 1rem;"> Upload File</a>
                <!-- <input type="file" flow-button   value="Upload"> -->
            </td>
            <td>
                 <span editable-select="user.category" e-name="category" e-form="rowform" e-ng-options="c.value as c.name for c in categories">
                  {{ showCategories(user) }}
                 </span>
            </td>
            <td style="white-space: nowrap">
                <!-- form -->
                <form editable-form name="rowform" onbeforesave="saveUser($data,user_id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
                    <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
                        save
                    </button>
                    <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
                        cancel
                    </button>
                </form>
                <div class="buttons" ng-show="!rowform.$visible">
                    <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
                    <button class="btn btn-danger" ng-click="deleteUser(user)">delete</button>
                </div>
            </td>
        </tr>
    </table>

.controller('mainCtrl', function($scope, $stateParams, $timeout, userService, categoryService, $filter, $q, verifyDelete, $window, $rootScope, $http, $state, $mdDialog) {
    categoryService.init(function(category_response) {
        $scope.categories = category_response.data.result;
        $scope.category = JSON.parse(JSON.stringify(getCategory($stateParams._id)));
        console.log($scope.category);
    });

    function getCategory(id) {
        for (var i = 0; i < $scope.categories.length; i++) {
             console.log(i);
            if ($scope.categories[i]._id === id) {

                return $scope.categories[i];

            }
        }
        return {
            name: ''
        };
    }
     $scope.deleteCategory = function(category) {
        console.log(category._id);
        verifyDelete(category).then(function() {
            if (category._id) {
                var url = '/api/categories/' + category._id;
                $http.delete(url, {})
                    .then(function(response) {
                        $scope.showModal = false;
                        $scope.users.splice(category._id, 1);
                    }, function(response) { // fail

                    });
            }

        });
    };

    $scope.subCategories=function(){
        $http.post('/api/categories/', name, $scope)
        .then(function(response) {
            console.log(name);

             }, function(response) {
            console.log(name);
            });
    }

    $scope.deleteUser = function(user) {
        var removeIndex = $scope.users.map(function(item) { return item._id; }).indexOf(user._id);
        verifyDelete(user).then(function() {
             if (user._id) {
                $http.delete('/api/users/' + user._id, {})
                    .then(function(response) {
                        $scope.showModal = false;
                        ~removeIndex && $scope.users.splice(removeIndex, 1);
                       // $scope.users.splice(user._id, 1);
                    }, function(response) { // fail

                    });
            }
        });
    };


    userService.init(function(user_response) {
        $scope.users = user_response.data.data;
    });


    $scope.genders = [{
        value: 'male',
        text: 'Male'
    }, {
        value: 'female',
        text: 'Female'
    }];

    $scope.loadCategories = function() {
        return $scope.categories.length ? null : $http.get('/api/categories/list').success(function(data) {
            $scope.categories = data;
        });
    };

    // filter users to show
    $scope.filterUser = function(user) {
        return user.isDeleted !== true;
    };



    // cancel all changes
    $scope.cancel = function() {
        for (var i = $scope.users.length; i--;) {
            var user = $scope.users[i];
            // undelete
            if (user.isDeleted) {
                delete user.isDeleted;
            }
            // remove new
            if (user.isNew) {
                $scope.users.splice(i, 1);
            }
        };
    };
$scope.showGender = function(user) {
var selected = [];
if(user.gender) {
   selected = $filter('filter')($scope.genders, {value: user.gender});
}
return selected.length ? selected[0].text : 'Not set';
 };


 $scope.showCategories = function(user) {
     var selected = [];
if(user.category_id) {
    selected = $filter('filter')($scope.categories, {value: user.category});
}
  return selected.length ? selected[0].name : 'Not set';

   };
  $scope.saveUser = function(user) {
    // console.log(name);
    if(user._id){

        $http.put('/api/users/'+user._id, user, $scope)
        .then(function(response) {
          $state.reload();
             }, function(response) {

            });

    }
    else{
        $http.post('/api/users/', user, $scope)
        .then(function(response) {
            $state.reload();

             }, function(response) {
                $scope.errorMessage=response.data;
                 $scope.errorValMessage = true;
                $timeout(function () {
                $scope.errorValMessage = false;
                }, 2000);



            });

    }
 };
$scope.addUser = function(user) {
$scope.inserted = {
    name:'',
     gender:null,
     email:'',
     password:'',
    re_password:'',
    category:null
};
$scope.users.push($scope.inserted);
};


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