How to connect the ng-model of two different controller in angularjs?

Question

I have one table which will fill with the JSON data. After the filling table, If some one wants to modify any row then it will pop-up window, where you can modify.

What I am doing:
I made two controller, I want to pass the ng-model value from one controller to other controller which is controller for window. Please tell me how to connect these two controller. Please see the running example, http://plnkr.co/edit/6lRT1B1sYcEx0lVCJiZZ?p=preview

index.html

<!DOCTYPE html>
<html>

<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">ToDo API Client Demo</a>
        </div>
  </div>
  <div ng-app="myApp" ng-controller="tasksCtrl">

         <table class="table table-striped">
             <tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
            <tr ng-repeat="task in tasks">

            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
                        <td>  <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>


            </tr>
         </table>

  </div>
  <div id="modal" role="dialog" class="modal hide fade">
        <div ng-controller="TaskController">
            <div class="modal-header">
                Task Dialog
            </div>
            <div class="modal-body">
                <label for="txtName"></label> 
                <input type="text"  ng-model="task.title" />
                <input type="text"  ng-model="task.description" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
            </div>
        </div>
   </div>
   <script>
    var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
        $http.get("data.json")
        //$http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          console.log(response.tasks)
          $scope.tasks = response.tasks;
        });
    });
    app.controller('TaskController', function($scope, $rootScope){
        $scope.editTask=function(task){
            $rootScope.task=task;
        }
    });

  </script>
</body>

</html>

possible duplicate of [How can I pass some data from one controller to another peer controller](http://stackoverflow.com/questions/18856153/how-can-i-pass-some-data-from-one-controller-to-another-peer-controller) — Sandro Munda, Jul 02 '15 at 06:54
possible duplicate of [How can I pass variables between controllers?](http://stackoverflow.com/questions/12008908/how-can-i-pass-variables-between-controllers) — squiroid, Jul 02 '15 at 06:54

score 2 · Accepted Answer · answered Jul 02 '15 at 07:18

First, place your ng-app="myApp" and ng-controller="tasksCtrl" to the body element.

E.g.

<body ng-app="myApp" ng-controller="tasksCtrl">

Then, move the

$scope.editTask=function(task) {
     $scope.task = task;
};

To the tasksCtrl. The TaskController is no longer needed. You can remove it.

Since, it only use one controller you can use $scope instead of $rootScope.

Here's the Plunkr.

Hope it helps.

score 1 · Answer 2 · answered Jul 02 '15 at 07:00

1

What you are trying to do would create a tight coupling between controllers but from what I see in the plunkr you would be better off with using angular-ui modal and just instantiate the modal window from code.

answered Jul 02 '15 at 07:00

kyrisu

4,541
10
43
66

score 1 · Answer 3 · answered Jul 02 '15 at 07:15

There are few mistakes that you did First one that you modal html code is not inside ng-app and you can use is Parent Child Concept of Angular ,In which you have no need to use $rootScope

Pluncker having complete solution of your problem:http://plnkr.co/edit/lRNJjM3aUIqQWFfE39yo?p=preview

Html:

  <div ng-app="myApp" ng-controller="tasksCtrl">

         <table class="table table-striped">
             <tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
            <tr ng-repeat="task in tasks">

            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
                        <td>  <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>


            </tr>
         </table>


  <div id="modal" role="dialog" class="modal hide fade">
        <div ng-controller="TaskController">
            <div class="modal-header">
                Task Dialog
            </div>
            <div class="modal-body">
                <label for="txtName"></label> 
                <input type="text"  ng-model="Edittask.title" />
                <input type="text"  ng-model="Edittask.description" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
            </div>
        </div>
   </div>
    </div>

Controller:

var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
        $http.get("data.json")
        //$http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          console.log(response.tasks)
          $scope.tasks = response.tasks;
        });
         $scope.editTask=function(task){
            $scope.selectedTask=task;
        }
    });
    app.controller('TaskController', function($scope, $rootScope){
      $scope.Edittask={};
      $scope.Edittask.title="";
      $scope.Edittask.description="";
      $scope.saveTask=function(){
        console.log('called');
        $scope.selectedTask.title=$scope.Edittask.title;
        $scope.selectedTask.description=$scope.Edittask.description;
      }

    });

Thanks for reply, you link is not working, Please share the valid link, its not working Thanks — geeks, Jul 02 '15 at 07:45
Your code is not loading the data to dialog box, if you switch in the second edit then it is update others also.. — geeks, Jul 02 '15 at 07:48

score 0 · Answer 4 · answered Jul 02 '15 at 06:56

0

If you need to access any methods in other controller and pass the data you could do like this,

angular.element(document.getElementById('OtherControllersId')).scope().methodInOtherController(data);

answered Jul 02 '15 at 06:56

Ranjith S

205
1
5

This is quite a hack and no clean solution. Also you shouldn't mix plain old javascript `getElement` with angulars `element` function. – Michael Jul 02 '15 at 07:01

How to connect the ng-model of two different controller in angularjs?

4 Answers4