Q:

ng-repeat items only appear after pagination click

I'm new to the Javascript-Meanstack and I wanted to implement a project with my friends. We currently work on a network sniffer which should implement d3.js. We want to draw network traffic graphically. The app also uses the pcap-module from npm. We also use MongoDB for the database and the structure of the whole app was designed with the yeoman generator (generator -> http://meanjs.org/generator.html). (I am currently developing in german so please don't wonder if the variable names are weird!)
Currently we're able to save our packets into our database by creating a session for them. Code is available in /server.js.
pcap = require('pcap'),
pcap_session = pcap.createSession('en1', 'ip');

after requiring the pcap module we are saving the packets into our collection named also packets, with this code also in /server.js.
mongoose.createConnection('mongodb://localhost/scream-dev');

var packetSchema = new mongoose.Schema({
    any: mongoose.Schema.Types.Mixed
});
var Pakete = mongoose.model('packets', packetSchema);

pcap_session.on('packet', function (raw_packet) {
    var packet_ip = pcap.decode.packet(raw_packet);

    var paket = new Pakete({
        any: packet
    });

    paket.save(function (err, paket) {
        if (err) return console.error(err);
        //console.log('Saved a IP Packet!');
    });
    //console.log(packet_ip);
});

all nice at the moment, if we look into our packet-collection I will find (after enough time, a few!!) datapackets with this scheme:
{
    "_id" : ObjectId("5534c9c538ebe8617b5ae35c"),
    "any" : {
        "link_type" : "LINKTYPE_ETHERNET",
        "pcap_header" : {
            "tv_sec" : 1429522885,
            "tv_usec" : 846102,
            "caplen" : 145,
            "len" : 145
        },
        "payload" : {
            "dhost" : {
                "addr" : [ 
                    104, 
                    168, 
                    109, 
                    69, 
                    154, 
                    194
                ]
            },
            "shost" : {
                "addr" : [ 
                    164, 
                    147, 
                    76, 
                    194, 
                    149, 
                    78
                ]
            },
            "ethertype" : 2048,
            "vlan" : null,
            "payload" : {
                "version" : 4,
                "header_length" : 5,
                "header_bytes" : 20,
                "diffserv" : 0,
                "total_length" : 131,
                "identification" : 10167,
                "flags" : {
                    "reserved" : 0,
                    "df" : 0,
                    "mf" : 0
                },
                "fragment_offset" : 0,
                "ttl" : 51,
                "protocol" : 6,
                "header_checksum" : 56601,
                "saddr" : {
                    "o1" : 173,
                    "o2" : 194,
                    "o3" : 122,
                    "o4" : 22
                },
                "daddr" : {
                    "o1" : 192,
                    "o2" : 168,
                    "o3" : 154,
                    "o4" : 35
                },
                "protocol_name" : null,
                "payload" : {
                    "sport" : 443,
                    "dport" : 51541,
                    "seqno" : 4050575809,
                    "ackno" : 3439177583,
                    "data_offset" : 8,
                    "header_bytes" : 32,
                    "reserved" : 0,
                    "flags" : {
                        "cwr" : 0,
                        "ece" : 0,
                        "urg" : 0,
                        "ack" : 1,
                        "psh" : 1,
                        "rst" : 0,
                        "syn" : 0,
                        "fin" : 0
                    },
                    "window_size" : 1653,
                    "checksum" : 55427,
                    "urgent_pointer" : 0,
                    "options" : {
                        "mss" : null,
                        "window_scale" : null,
                        "sack_ok" : null,
                        "sack" : null,
                        "timestamp" : 973486614,
                        "echo" : 1190534572
                    },
                    "data" : { "$binary" : "FwMDAEoAAAAAAAABDDepuDqq89CSU3Qi2+AY8FFmXoNq4uSCD0e34q7nOEZVJ1+0RLj8JAEw30z5p8wEj    fBgaFzbgBWn3z9LA5CmySlNDg==", "$type" : "00" },
                    "data_bytes" : 79
                }
            }
        }
    },
    "__v" : 0
}

Everything's good. Now we want to add the datapackets, first of all only with ng-repeat inside tables, to our frontend. we also want to add a search, which searches in EVERY column of the table. pagination is also added in experimental way.
In our modules folder /public/modules/network (network is our own module) the /public/modules/network/controllers/network.client.controller.js is written like this:
'use strict';
angular.module('network').factory('Packets', ['$resource',
 function ($resource) {
    return $resource('network/:packetId', {
        packetId: '@_id'
    }, {
        update: {
            method: 'PUT'
        }
    });
 }
]);

angular.module('network')
    .controller('NetworkController', ['$scope', '$stateParams', '$location', 'Authentication', 'Packets',
     function ($scope, $stateParams, $location, Authentication, Packets) {

            $scope.authentication = Authentication;

            $scope.packets = Packets.query();

            $scope.filteredTodos = [];
            $scope.currentPage = 1;
            $scope.numPerPage = 16;
            $scope.maxSize = 20;
            $scope.todos = [];
            $scope.todos = $scope.packets;

            $scope.$watch('currentPage + numPerPage', function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage),
                    end = begin + $scope.numPerPage;

                $scope.filteredTodos = $scope.todos.slice(begin, end);
             });

if i guessed it right, the ng-repeat code, like in our /public/modules/network/views/network.client.view.html has to look like this, according to the Packet.query() - Codeline, or is it?:
<div data-ng-controller="NetworkController">
<div>
    <table class="table table-striped table-condensed table-hover">
        <thead>
            <tr>
                <th class="id" custom-sort order="'id'" sort="sort">Object Id&nbsp;</th>
                <th class="name" custom-sort order="'name'" sort="sort">saddr&nbsp;</th>
                <th class="description" custom-sort order="'description'" sort="sort">daddr&nbsp;</th>
                <th class="field3" custom-sort order="'field3'" sort="sort">protocol&nbsp;</th>
                <th class="field4" custom-sort order="'field4'" sort="sort">sport&nbsp;</th>
                <th class="field5" custom-sort order="'field5'" sort="sort">dport&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in filteredTodos track by item.id | filter:search">
                <td>{{item._id}}</td>
                <td>{{item.any.payload.payload.saddr.o1}}.{{item.any.payload.payload.saddr.o2}}.{{item.any.payload.payload.saddr.o3}}.{{item.any.payload.payload.saddr.o4}}</td>
                <td>{{item.any.payload.payload.daddr.o1}}.{{item.any.payload.payload.daddr.o2}}.{{item.any.payload.payload.daddr.o3}}.{{item.any.payload.payload.daddr.o4}}</td>
                <td>{{item.any.payload.payload.protocol_name}}</td>
                <td>{{item.any.payload.payload.payload.sport}}</td>
                <td>{{item.any.payload.payload.payload.dport}}</td>
            </tr>
        </tbody>
        <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true">
        </pagination>
        <br>
        <input type="text" ng-model="search.$" />
    </table>
</div>
</div>

we have figured out that if track by item._id is added in the tablerow element on the above code, the search doesnt work completely, if track by.. is away its working partially (we couldnt filter a dot "." ??)
Anyway... we have two questions now:
First:
Why does the table only show results if we click on another pagenumber? (the pageumbers itself are refreshing continously)
Second:
How can we display a d3.js graph on the same page like our table is? We have installed d3 and nvd3 with bower install --save, also added the dependencies in /config/env/all.js like "'public/lib/d3/d3.min.js'" or "'public/lib/d3/d3.js'". Inside our /public/config.js we added also 'd3' and 'nvd3' to our applicationModuleVendorDependencies but it always returns an error:

Error: [$injector:nomod] Module 'd3' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

We also have tried to use a directive inside the controller but then it returns another error:

Unknown Provider <- d3 <- d3BarsProvider

It would be really nice if you can help me with any code or ideas. We are working on this issue for weeks now.

A:

First of all, according to the ng-repeat documentation:

if filters are used in the expression, they should be applied before the tracking expression.

Thus your expression becomes:
item in filteredTodos | filter:search track by item.id

Secondly, the D3 library is exposed on window. It is not part of Angular. You have three options:

Use D3 directly, without injection.
Inject $window like so: function ($window) { var d3 = $window.d3; }
Provide it yourself, like: angular.module('yourApp').constant('d3', d3);

I would recommend #3 because it's easier to mock in unit tests.

