Angular page doesnt refresh when data added/deleted - angularjs

Question

I have an angular CRUD app with a list of subjects. I can add, delete and edit the subjects. My problem is that when I add or delete a subject, the page does not refresh with the new list of subjects. I've tried including $route.reload(); but it gives me a console error:
ReferenceError: $route is not defined
Can anyone advise how to fix this error or a better way of refreshing the page?
HTML:
<h3>Add a Subject</h3>
<div ng-controller="SubjectNewCtrl">
<div class = "input-group">
<form name="newSubjectForm">
Name: <br /> <input type="text" name="name" ng-model="subjects.name">
<br />
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></button>
<a ng-click="createNewSubject()" class="btn btn-small btn-primary">Save Changes</a>
</form>
</div>
</div>
SubjectNewCtrl:
angular.module('myApp.controllers')
.controller('SubjectNewCtrl', ['$scope', 'SubjectsFactory', '$location',
function ($scope, SubjectsFactory, $location) {
// callback for ng-click 'createNewSubject':
$scope.createNewSubject = function () {
SubjectsFactory.create($scope.subjects);
$location.path('/subjects');
//This gives the console error
$route.reload();
}
$scope.subjects = SubjectsFactory.query();
}]);
EDIT- my routing in app.js
'use strict'
angular.module('myApp',
[
'ngRoute',
'ngResource',
'myApp.services',
'myApp.directives',
'myApp.controllers',
]);
angular.module('myApp')
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/subjects', {templateUrl: 'partials/subjects/subject-list.html', controller: 'SubjectCtrl'}).
when('/subjects/new', {templateUrl: 'partials/subjects/subject-new.html', controller: 'SubjectNewCtrl'}).
when('/subjects/:subjectid', {templateUrl: 'partials/subjects/subject-detail.html', controller: 'SubjectEditCtrl'}).
otherwise({redirectTo: '/home'});
}]);

Answer 1

angular.module('myApp.controllers')
.controller('SubjectNewCtrl', ['$scope', 'SubjectsFactory', '$location', '$route',
function ($scope, SubjectsFactory, $location, $route) {
// callback for ng-click 'createNewSubject':
$scope.createNewSubject = function () {
SubjectsFactory.create($scope.subjects);
$location.path('/subjects');
//This gives the console error
$route.reload();
}
$scope.subjects = SubjectsFactory.query();
}]);
I add "$route" to your function

Answer 2

try to use location.reload();
example
vm.deleteUser = function (id) {
dataService.deletUser(id)
.then(function () {
location.reload();
});
};

Answer 3

use scope.$apply when updating the list of subjects do not force the whole page to reload...
$scope.createNewSubject = function() {
$scope.$apply(function() {
SubjectsFactory.create($scope.subjects);
});
};
btw. $location.path('/subjects') doesn't do anything if you are already on that page

Answer 4

You might want to try something like this instead of reloading the route:
$scope.createNewSubject = function () {
SubjectsFactory.create($scope.subjects).then(function (newSubject) {
$scope.subjects = SubjectsFactory.query(); // [1]
});
}
This version waits until the create request has completed before refetching the list of subjects (including the new subject), which will cause the view to refresh automatically.
In your code, you're reloading the current route/view immediately after initiating the create request without giving the create request a chance to complete, so the new subject actually doesn't exist yet.
[1] Alternatively, you might prefer to do $scope.subjects.push(newSubject) instead of refetching the list of subjects.