Selectpicker doesn't show inside a table column
<p>I have a table of movies and I am using ng-repeat to display the rows. But each column shows the movie variable (like name, director, actor, year..) and one of then is the genre but the movie can have multiple genres. So, I am using a select to do this.</p>

<p>The problem is, my select just don't show up in the screen! I don't know if this is a angular problem or I am doing something wrong..</p>

<p>Here is my table:</p>

<pre><code>&lt;div class="container" style="margin-top: 30px; min-width: 90%" ng-controller="adminController"&gt;
&lt;table class="table table-hover"&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;
                                &lt;h2&gt;Filme&lt;/h2&gt;
                            &lt;/th&gt;
                            &lt;th&gt;
                                &lt;h2&gt;Ano&lt;/h2&gt;
                            &lt;/th&gt;
                            &lt;th&gt;
                                &lt;h2&gt;Diretor&lt;/h2&gt;
                            &lt;/th&gt;
                            &lt;th&gt;
                                &lt;h2&gt;Ator/Atriz&lt;/h2&gt;
                            &lt;/th&gt;
                            &lt;th&gt;
                                &lt;h2&gt;Pontuação&lt;/h2&gt;
                            &lt;/th&gt;
                            &lt;th&gt;
                                &lt;h2&gt;Generos&lt;/h2&gt;
                            &lt;/th&gt;
                            &lt;th&gt;
                                &amp;nbsp;
                            &lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                        &lt;tr&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="novoFilme.nome" placeholder="Nome do filme"/&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="novoFilme.ano" placeholder="Ano do filme"/&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="novoFilme.diretor" placeholder="Diretor do filme"/&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="novoFilme.ator" placeholder="Ator/atriz do filme"/&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="novoFilme.pontuacao" placeholder="Pontuação do filme"/&gt;&lt;/td&gt;
                            &lt;td&gt;
                                &lt;select class="selectpicker" title="Nenhum selecionado" ng-model="novoFilme.generos" ng-options="genero.value as genero.nome for genero in generos" multiple&gt;

                                &lt;/select&gt;
                            &lt;/td&gt;
                            &lt;td style="text-align: right"&gt;&lt;button class="btn btn-primary" ng-click="addFilme()"&gt;Adicionar Filme&lt;/button&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr ng-repeat="filme in filmes"&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="filme.nome"/&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="filme.ano"/&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="filme.diretor"/&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="filme.ator"/&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;input class="form-control" ng-model="filme.pontuacao"/&gt;&lt;/td&gt;
                            &lt;td&gt;
                                &lt;select class="selectpicker" title="Nenhum selecionado" ng-options="genero.value as genero.nome for genero in generos" multiple&gt;

                                &lt;/select&gt;
                            &lt;/td&gt;
                            &lt;td style="text-align: right"&gt;&lt;button class="btn btn-danger" ng-click="remove(filme._id)"&gt;Remover&lt;/button&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>Here is my controller:</p>

<pre><code>app.controller('adminController', function ($scope, $http) {
    $scope.generos = [
        {
            nome: "Comédia",
            value: "Comédia"
        },
        {
            nome: "Comédia Romântica",
            value: "Comédia Romântica"
        },
        {
            nome: "Drama",
            value: "Drama"
        },
        {
            nome: "Ação",
            value: "Ação"
        },
        {
            nome: "Policial",
            value: "Policial"
        },
        {
            nome: "Suspense",
            value: "Suspense"
        },
        {
            nome: "Terror",
            value: "Terror"
        }
    ];

    var atualizar = function () {
        $http.get('/filmes').success(function (response) {
            $scope.filmes = response;
            $scope.novoFilme = "";
        });
    };

    atualizar();

    $scope.addFilme = function () {
        $http.post('/filmes', $scope.novoFilme).success(function (response) {
            atualizar();
        });
    };

    $scope.remove = function (id) {
        $http.delete('/filmes/' + id).success(function (response) {
            atualizar();
        });
    };

    $scope.save = function () {
        for (i = 0; i &lt; $scope.filmes.length; i++) {
            $http.put('/filmes/' + $scope.filmes[i]._id, $scope.filmes[i]).success(function (response) {
                atualizar();
            });
        }
    };
});
</code></pre>

<p>Anyone knows how to fix it or any ideas how to do this in a different way?</p>

<p>Edit:
Here is the screen shot:</p>

<p><a href="http://imgur.com/a/bXgBK" rel="nofollow">http://imgur.com/a/bXgBK</a></p>