selectable table modal popup in angular js

Question

I am trying to open a modal popup with table. How can I do this? In my app.js, on the click event of row open a modal, I also want to update some field with the selected item value. But i can't update with selected value.

my app.js
 var tableApp = angular.module('tableApp', ['ui.bootstrap']);


tableApp.controller('tableController', function ($scope,$rootScope, $filter, $modal) {
    $scope.filteredPeople = [];

    $scope.currentPage = 1;
    $scope.pageSize = 10;
    $scope.people = [{ id: "1", name: "joe",disable:true },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true },
    { id: "1", name: "joe", disable: true },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true },
    { id: "1", name: "joe", disable: true },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true },
    { id: "1", name: "joe", disable: true },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true },
    { id: "1", name: "joe" },
                 { id: "2", name: "bill", disable: true },
                 { id: "3", name: "john", disable: true }];



    $scope.getPage = function () {
        var begin = (($scope.currentPage - 1) * $scope.pageSize);
        var end = begin + $scope.pageSize;
        $scope.filteredPeople = $filter('filter')($scope.people, {
            id: $scope.idFilter,
            name: $scope.nameFilter

        });
        $scope.totalItems = $scope.filteredPeople.length;
        $scope.filteredPeople = $scope.filteredPeople.slice(begin, end);
    };
    $scope.getPage();

    $scope.pageChanged = function () {
        $scope.getPage();
    };
    $scope.open = function () {
        $scope.id = generateUUID();
    };
    $scope.dblclick = function (index) {
        for (var i = 0; i < $scope.filteredPeople.length; i++) {
            $scope.filteredPeople[i].disable = true;
        }
        return index.disable = false;
    }
    $scope.rowSelect = function (rowdata) {
        alert(rowdata.name);
    }


});
tableApp.controller('DetailModalController', [
'$scope', '$modalInstance', 'item',
function ($scope, $modalInstance, item) {

    $scope.item = item;

    $scope.dismiss = function () {
        $modalInstance.dismiss();
    };

    $scope.close = function () {                    
        $modalInstance.close($scope.item);                       
    };
}]);

tableApp.directive('myModal', function ($log, $compile) {
    var parm = [];
    return {
        restrict: 'E',
        templateUrl: 'modalBase.html',
        scope: {
            modal: '=',
            idF:'='
        },
        link: function (scope, element, attrs) {
            debugger;
            parm.name = attrs.idf;
        }
        //controller: function ($scope) {
        //    debugger;
        //    console.log($scope);
        //    $scope.selected = {
        //        item: $scope.modal.items[0]
        //    };

        //    $scope.ok = function () {
        //        debugger;
        //        alert(parm.name);
        //        $scope.modal.instance.close($scope.selected);

        //    };

        //    $scope.cancel = function () {
        //        $scope.modal.instance.dismiss('cancel');
        //    };

        //    $scope.modal.instance.result.then(function (selectedItem) {
        //        $scope.selected = selectedItem;
        //    }, function () {
        //        $log.info('Modal dismissed at: ' + new Date());
        //    });
        //}
    };
});

Answer 1

As I understand, you use angular.ui. I would suggesst you to use $modal service instead of $modalInstance. Using that you can call your modal instance with $modal.open(). And also you don't need to close it in your controller - place appropriate methods on your modal template and it will work by its services

Template:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="$close()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="$dismiss('cancel')">Cancel</button>
    </div>
</script>

Controlelr

var modalInstance = $uibModal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

};

You can find more info about it in angular.ui documentation for modals