Confirm button does not remove user from list? AngularJS

Question

I am creating a web app, where I have a list of users on one page and on the second page I have a form of that users, with three buttons. However, I have a confirm button that when the confirm button is clicked, I want the user to get removed from the list. I have implemented it, but for some reason confirm button is not working.

Here is my code.

    <div ng-controller="MyCtrl">
<div ng-repeat="person in userInfo.users | filter : {id: userId}">

<a class="back" href="#/user">Back</a>

  <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
    Edit
  </button>

  <button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>

  <a class="delete" ng-click="confirmClick() && confirmedAction()" confirm-click>Confirm</a>


  <div class="people-view">

    <h2 class="name">{{person.firstName}}</h2>

    <h2 class="name">{{person.lastName}}</h2>

    <span class="title">{{person.email}}</span>

    <span class="date">{{person.website}} </span>


</div>

  <div class="list-view">

    <form>

      <fieldset ng-disabled="inactive">

        <legend>Basic Info</legend>

        <b>First Name:</b>

        <input type="text" ng-model="person.firstName">
        <br>

        <b>Last Name:</b>

        <input type="text" ng-model="person.lastName">
        <br>

        <b>Email:</b>

        <input type="email" ng-model="person.email">


        <br>

      </fieldset>

    </form>

  </div>
</div>
</div>

App.js

    var app = angular.module("UserPortal", ['ngRoute',  'ui.bootstrap' ]);


   app.controller('MyCtrl', function($scope) {


    $scope.inactive = true;

    $scope.confirmedAction = function() {

    isConfirmed.splice($scope.person.id, 1);

    location.href = '#/user';






    }

    });


       app.directive('confirmClick', ['$q', 'dialogModal', function($q, 
       dialogModal) {
       return {
        link: function (scope, element, attrs) {
            // ngClick won't wait for our modal confirmation window to 
          resolve,
            // so we will grab the other values in the ngClick attribute, 
             which
            // will continue after the modal resolves.
            // modify the confirmClick() action so we don't perform it again
            // looks for either confirmClick() or confirmClick('are you 
             sure?')
                var ngClick = attrs.ngClick.replace('confirmClick()', 'true')
                .replace('confirmClick(', 'confirmClick(true,');

            // setup a confirmation action on the scope
            scope.confirmClick = function(msg) {
                // if the msg was set to true, then return it (this is a workaround to make our dialog work)
                if (msg===true) {
                    return true;
                }
                // msg can be passed directly to confirmClick('Are you sure you want to confirm?')
                // in ng-click
                // or through the confirm-click attribute on the
                // <a confirm-click="Are you sure you want to confirm?"></a>
                msg = msg || attrs.confirmClick || 'Are you sure you want to confirm?';
                // open a dialog modal, and then continue ngClick actions if it's confirmed
                dialogModal(msg).result.then(function() {
                    scope.$eval(ngClick);
                });
                // return false to stop the current ng-click flow and wait for our modal answer
                return false;
            };
        }
    }
}])

/*
 Modal confirmation dialog window with the UI Bootstrap Modal service.
 This is a basic modal that can display a message with yes or no buttons.
 It returns a promise that is resolved or rejected based on yes/no clicks.
 The following settings can be passed:

 message         the message to pass to the modal body
 title           (optional) title for modal window
 okButton        text for YES button. set false to not include button
 cancelButton    text for NO button. ste false to not include button

 */
.service('dialogModal', ['$modal', function($modal) {
    return function (message, title, okButton, cancelButton) {
        // setup default values for buttons
        // if a button value is set to false, then that button won't be included
        cancelButton = cancelButton===false ? false : (cancelButton || 'No');
        okButton = okButton ===false ? false : (okButton || 'Yes');

        // setup the Controller to watch the click
        var ModalInstanceCtrl = function ($scope, $modalInstance, settings) {
            // add settings to scope
            angular.extend($scope, settings);
            // yes button clicked
            $scope.ok = function () {
                $modalInstance.close(true);
            };
            // no button clicked
            $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
            };
        };

        // open modal and return the instance (which will resolve the 
          promise on ok/cancel clicks)
        var modalInstance = $modal.open({
            template: '<div class="dialog-modal"> \
              <div class="modal-header" ng-show="modalTitle"> \
                  <h3 class="modal-title">{{modalTitle}}</h3> \
              </div> \
              <div class="modal-body">{{modalBody}}</div> \
              <div class="modal-footer"> \
                  <button class="btn btn-primary" ng-click="ok()" ng-show="okButton">{{okButton}}</button> \
                  <button class="btn btn-warning" ng-click="cancel()" ng-show="cancelButton">{{cancelButton}}</button> \
              </div> \
          </div>',
            controller: ModalInstanceCtrl,
            resolve: {
                settings: function() {
                    return {
                        modalTitle: title,
                        modalBody: message,
                        okButton: okButton,
                        cancelButton: cancelButton
                    };
                }
            }
        });
        // return the modal instance
        return modalInstance;
    }
}])


    app.config(function ($routeProvider) {
     $routeProvider
     .when("/user", {
    controller: "HomeController",
    templateUrl: "partials/home.html"
     })
    .when("/user/:id", {
    controller: "UserController",
    templateUrl: "partials/about.html"

     })
    .otherwise({
    redirectTo: '/user'

     });

});

HomeController

    var isConfirmed = false;
app.controller('HomeController', function($scope, people, $http) {
    if (!isConfirmed) {
        people.getUserInfo().then(function (response) {

            $scope.userInfo = response.data;



             isConfirmed = $scope.userInfo;

            console.log($scope.person);

        }, function (error) {
            console.log(error)
        });
    }
}); 

Answer 1

If you want to trigger more then one function in ng-click you sould separete them with ; not &&

Change this

ng-click="confirmClick() && confirmedAction()"

to

ng-click="confirmClick(); confirmedAction()"

Update

If the MyCtrl is inside of the scope of HomeController then that controller inherits from the HomeController. That being said, the $scope.userInfo will be available in the MyCtrls scope.

To remove a person from the users array you need to do two things

first, pass the current user to the method

$scope.confirmedAction = function(person) {

    $scope.userInfo.users.splice(person.id, 1);
    location.href = '#/user';
};

then add the person in the ng-click event

ng-click="confirmClick(); confirmedAction(person);"