Lists sharing between two views

i retrieved the data using service,iterate the list using ng-repeat same list share to another view(Html)

in your dataservice , store the results from your server

create a public function in the service to get the data

now your controllers can fetch the data via the public function

for example

$scope.myItems = MyService.getData();

AngularJS wil automaticly bind the scope variable to the Service data

You can also create some event when the data in the service is altered

Then in your controllers listen to that event. when the event fires, get the data again

Create a service, which will act as an communication between two views with two different controllers. If you use scope variable, the data will be lost once you are out of that controller. So services will fulfill this need.

In one controller you can set the data to a service, something like below.


From the second controller you can get the data to a service, something like below.

var data = DataService.getData(data);

The service should be something like below.


  this.setData = function(data){ = data;
  this.getData = function(){

You need to inject the DataService in both the controllers.

i have only one controller and one service,retrieved the list from service,iterate the list showing some properties in one view and second view showing complete details in another view

i showing list in cards like this


Back off, man. I'm a scientist.

i have alredy list that list use to showing details by id in another view Exactly like this example like this i am not use controoller & service ,how to pass list one view to another view

aha … the example uses the same controller (I shouldn’t do that) … so basicly … on each item item in the list


The ID of the todo record is passed in the function on moment when the user taps on the item

Then the route has a resolve to get the data from the service (with the ID)

  $stateProvider.state('app.todos.detail', {
    url: '/:todoId',
    controller: 'TodoCtrl',
    templateUrl: 'todo.html',
    resolve: {
      todo: function($stateParams, TodosService) {
        return TodosService.getTodo($stateParams.todoId)

Then the conctroller will have access to the var “todo” , assign to an scope var

app.controller('TodoCtrl', function($scope, todo) {
  $scope.todo = todo;

And the view will bind to it

  <script type="text/ng-template" id="todo.html">
      <ion-view title="Question {{}}">
          <p> {{todo.question}}</p>
            <p> {{todo.answer}} </p>
          <div class="list">
            <!--label class="item item-input">
              <span class="input-label">Question</span>
              <input type="text" ng-model="todo.question">
            <label class="item item-input">
              <span class="input-label">Answer</span>
              <input type="text" ng-model="todo.answer">
            <ion-toggle ng-model="todo.flagged" toggle-class="toggle-assertive">Done</ion-toggle>