Creating a factory service with ngresource using just one view from multiples controllers

Question

/* hablo español*/

1-I have this json:

{  "pizarra": [
    {

        "director": "",
        "local": "pizarra",
        "telefono": ["2085236", "2085237", "2085238", "2085239", "2085240", "2085241", "2085242"],
        "ext": ["0", "211"],
        "ubicacion": "lobby",
        "puerta": "15202"


    }
],

    "dirgeneral": [
        {

            "director": "Blanca Rosa Hung Ramos",
            "local": "Secretaria",
            "telefono": ["2082546", "2086376"],
            "ext": ["258"],
            "ubicacion": "Edif. 1 piso 1",
            "puerta": "2"
        },
        {
            "director": "Blanca Rosa Hung Ramos",
            "local": "Especialista de cuadros",
            "telefono": ["2086534"],
            "ext": ["270"],
            "ubicacion": "Edif. 1 piso 1",
            "puerta": "2"
        }
    ]}
      ...

2-I have this routes:

agendaApp.config(['$routeProvider', function($routeProvider){
        $routeProvider.
            when('/', {
                templateUrl: 'src/views/agenda.html',    <----see i use the same view
                controller: 'pizarraCtrl'
            }).
            when('/pizarra', {
                templateUrl: 'src/views/agenda.html',    <----see i use the same view
                controller: 'pizarraCtrl'
            }).
            when('/direccion-general', {
                templateUrl: 'src/views/agenda.html',    <----see i use the same view
                controller: 'dirGrlCtrl'
            }).
       ...

3- i have this service:

agendaServices.factory('getApp',['$resource', function($resource){

return $resource('./data/directorio.json', {}, {

    query: {method: 'GET',  isArray: false}
});
   ...

4- i have this controller

   agendaControllers.controller('pizarraCtrl', ['$scope', '$rootScope', 'getApp', function ($scope, $rootScope, getApp) {

        var data = getApp.query();
        $rootScope.datos = data;

console.log(data);



}]);
 agendaControllers.controller('dirGrlCtrl', ['$scope', '$rootScope', 'getApp', function ($scope, $rootScope, getApp) {

        var data = getApp.query();
        $rootScope.datos = data;

console.log(data);



}]);
...

5- i have this partial:

<tr ng-repeat="dir in datos | filter: query | orderBy: orden">

        <td style="width: 200px">{{ dir.local }}</td>
        <td style="width: 120px">
            <select>
                <option ng-repeat="phone in dir.telefono">
                    {{ phone }}
                </option>
            </select>
        </td>
        <td style="width: 80px">
            <select>
                <option ng-repeat="ext in dir.ext">
                    {{ext }}
                </option>
            </select>
            </td>
        <td style="width: 95px">{{ dir.ubicacion }}</td>
        <td style="width: 80px;">{{ dir.puerta }}</td>
    </tr>

What i need is to use the same view for bind the pizzarra url and the dirgeneral url. I know to do it with different views putting <tr ng-repeat="dir in datos.pizarra | filter: query | orderBy: orden"> or <tr ng-repeat="dir in datos.dirgeneral | filter: query | orderBy: orden"> but if i try to filter the data in controller lik this: $rootScope.datos = data.pizarra; it won't bind the data needed. when i put in my controller a console.log(data); and then looking in my firebug, the data i receive is this: f { $promise={...}, $resolved=false, $get=function(), más...} why f? and when i click it:

$promise
    Object { then=function(), catch=function(), finally=function()}

$resolved
    true


dirgeneral
    [Object { director="Blanca Rosa Hung Ramos", local="Secretaria", telefono=[2], más...}, Object { director="Blanca Rosa Hung Ramos", local="Especialista de cuadros", telefono=[1], más...}, Object { director="Blanca Rosa Hung Ramos", local="Auditoria", telefono=[1], más...}, Object { director="Blanca Rosa Hung Ramos", local="Asesor Juridico", telefono=[1], más...}]


pizarra
    [Object { local="pizarra", telefono=[7], ext=[2], más...}]

$delete
    function() 
...

Answer 1

In this part:

var data = getApp.query();

The query method returns a promise of data; this happens because it is an asynchronous AJAX method. I recommend you do this:

getApp.query( function (data) {
    $scope.datos = data.pizarra;
});

I recommend using only the $scope instead of $rootScope and if the controllers are separated using information in data you need without using a filter: $scope.datos = data.pizarra and depending on the controller you would use .pizarra or .dirgeneral without using the filter.

Translated with Google Translate. The original answer is below.

---

En esta parte:

var data = getApp.query();

El metodo.query te regresa una promesa de datos, esto pasa porque es un metodo asincrono ajax, te recomiendo hacer esto:

getApp.query( function (data) {
    $scope.datos = data.pizarra;
});

Te recomiendo usar solo el $scope en vez de $rootScope y si los controladores estan separados usa la informacion en datos que necesitas sin usar un filter: $scope.datos = data.pizarra ya dependiendo en el controlador que lo hagas usarias .pizarra o .dirgeneral y sin usar el filter.