I Have to refresh the AngularJS page to see if i added something

Question

I do not natively speak English, so please bear with me and my English. I am trying to make a crud application. But when i press save it does not show it in the table. What could be the problem? Thank you for your help!

services.js:

var professionalSkillServices = angular.module('professionalSkillServices', ['ngResource']);

 professionalSkillServices.factory('ProfessionalSkill', ['$resource',
function ($resource) {
    return $resource('http://jbossews-themaopdracht78.rhcloud.com/rest/professionalskills/:id', {id: '@id'}, {
        update: {
            method: "PUT"
        },
        delete: {
            method: "DELETE",
            params:{}
        }
    });
}]);

app.js

   var professionalSkillApp = angular.module('professionalSkillApp', [
     'ngRoute',
  'professionalSkillControllers',
  'professionalSkillServices'
 ]);

     professionalSkillApp.config(['$routeProvider',
  function($routeProvider) {
$routeProvider
    .when('/professionalskills', {templateUrl: 'partials/professionalSkills-list.html', controller: 'ProfessionalSkillListCtrl'})
    .otherwise({redirectTo: '/professionalskills'});
}]);

controller.js

 var professionalSkillControllers = angular.module('professionalSkillControllers', []);

   professionalSkillControllers.controller('ProfessionalSkillListCtrl', ['$scope', 'ProfessionalSkill',
function ($scope, ProfessionalSkill) {
    var professionalskill = ProfessionalSkill.get({id: $scope.id}, function () {
        console.log(professionalskill);
    });
    $scope.professionalskills = ProfessionalSkill.query();

    $scope.professionalskill = new ProfessionalSkill();

    $scope.addProfessionalSkill = function () {
        ProfessionalSkill.save($scope.professionalskill, function () {
            $scope.professionalskills.push($scope.professionalskill);
        });
        $scope.professionalskill = "";
    };
    $scope.deleteBT = function (idx) {
        var professionalSkill_to_delete = $scope.professionalskills[idx];
        if (ProfessionalSkill) {
            ProfessionalSkill.remove({id: professionalSkill_to_delete.id}, function (success) {
                $scope.professionalskills.splice(idx, 1);
            });
        }
    };
}
]);

professionalSkill-list.html

  <div class="panel-body" id="psForm psFormTable">
<div class="panel panel-default">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
                <th>Naam</th>
                <th>Samenvatting</th>
                <th>Niveau</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="professionalskill in professionalskills">
                <td>{{professionalskill.id}}</td>
                <td>{{professionalskill.naam}}</td>
                <td>{{professionalskill.samenvatting}}</td>
                <td>{{professionalskill.niveau}}</td>
                <td class="table-buttons">
                    <button ng-click="deleteBT($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash"></span></button>
                    <button class="btn btn-sm btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span></button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

professionalskill.html(just the div)

   </ol>
<div class="page-header">
    <h1>ProfessionalSkill Aanmaken</h1>
</div>
<div class="row" ng-controller="ProfessionalSkillListCtrl">
    <form class="form-horizontal" name="professionalskillForm" role="form">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="col-md-2">
                            <label for="naam" class="control-label">Naam</label>
                        </div>
                        <div class="col-md-9">
                            <input id="naam" class="form-control" type="text" ng-model="professionalskill.naam">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            <label for="samenvatting" class="control-label">Samenvatting</label>
                        </div>
                        <div class="col-md-9">
                            <input id="samenvatting" class="form-control" type="text" ng-model="professionalskill.samenvatting">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            <label for="niveau" class="control-label">Niveau</label>
                        </div>
                        <div class="col-md-9">
                            <select id="niveau" class="form-control" name="niveau" ng-model="professionalskill.niveau">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                            <!-- <input type="text" id="niveau" class="form-control" ng-model="beroepstaak.niveau"/> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn btn-danger pull-left">Annuleren</button>
        <button ng-click="addProfessionalSkill(professionalskill)" class="btn btn-success pull-right">Opslaan</button>
    </form>
</div>
<div class="row">
    <div ng-view></div>
</div>

Answer 1

It seems to me that you are pushing to a different list of skills. By the looks of it you instantiated the same controller twice and since controllers in AngularJS are not singletons it is most likely the case that you're pushing to a different array.

In your form:

<div class="row" ng-controller="ProfessionalSkillListCtrl">

And in your routing:

  .when('/professionalskills', {templateUrl: 'partials/professionalSkills-list.html', controller: 'ProfessionalSkillListCtrl'})