$http Service Not Updating View - angularjs

Question

I have two controllers one nested inside another. ParentController has one object which I am using in ChildController as it is directly available in child. Now, in child, I am calling $http service and then updating this object. I think it should update the view.
I tried calling $scope.$apply() promise success function, but I think I don't really understand how to use this one. How to update the DOM without refreshing the page?
I also read about calling $http service inside $scope.$apply(). How to do that?
$scope.addVideo = function (data) {
console.log('scope tutorial', tutorial);
$http.post('/tutorials/' + tutorial.id + '/videos/', $scope.formData)
.then((response) => {
$window.tutorial.videos.push(response.data.video);
window.location = '/tutorials' + tutorial.id;
})
}
Now, In the UI, I am using TutorialsController which takes care of adding Tutorial. I mean it's a form and it only works with form. Then there is VideoController that displays vidoes in this tutorial.
<div ng-controller="TutorialsController">
// add video in this tutorial logic
<ol ng-repeat="vid in tutorial.videos" ng-controller="VideoController">
<li>{{vid.title}}</li><button>Delete</button>
</ol>
</div>
When the video is added by parent, I want to update child and when child VideoController removes a video with a delete button, I want to remove it from the parent scope.

Answer 1

$scope.addVideo = function (data) {
console.log('scope tutorial', tutorial);
$http.post('/tutorials/' + tutorial.id + '/videos/', $scope.formData)
.then((response) => {
̶$̶w̶i̶n̶d̶o̶w̶.̶t̶u̶t̶o̶r̶i̶a̶l̶.̶v̶i̶d̶e̶o̶s̶.̶p̶u̶s̶h̶(̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶.̶v̶i̶d̶e̶o̶)̶;̶
$scope.tutorial.videos.push(response.data.video);
̶w̶i̶n̶d̶o̶w̶.̶l̶o̶c̶a̶t̶i̶o̶n̶ ̶=̶ ̶'̶/̶t̶u̶t̶o̶r̶i̶a̶l̶s̶'̶ ̶+̶ ̶t̶u̶t̶o̶r̶i̶a̶l̶.̶i̶d̶;̶
})
}

Answer 2

Considering you don't have full code written, I took some guesses and prepared something for you. You should try NOT to use $scope.$apply unless you are absolutely sure that you need it, most of the time angular will trigger digest cycle for you so there's no need to use $scope.$apply. Main thing is you could use $scope.$emit to emit value of video you want to delete.
If you are not familiar with $emit check this for more details (you could also check $broadcast which will send event from top to bottom - opposite of $emit):
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit
So, in your case put in your VideoController something like:
$scope.deleteVideo = function(video) {
$scope.$emit('deleteVideo', video);
};
And in your TutorialsController you will need to listen to changes similar to this - data parameter will have your video object from child controller:
$scope.$on('deleteVideo', (event, data) => {
$scope.tutorial.videos = $scope.tutorial.videos.filter(video=>!angular.equals(video,data));
});
This above will just delete video from $scope - so you will need to to add your $http logic.
I simplified your video I added someProperty on each video object and title which you use to display title, right now everything is there just to show how you can easily communicate between controllers via $emit/$broadcast.
Here's that simplified example on fiddle: https://jsfiddle.net/pegla/d1rb96us/2/
Also I would advise you to check this Todd Motto's styleguide and start using component based architecture. It's currently best AngularJS style guide online: https://github.com/toddmotto/angularjs-styleguide
Hope it helps.
Cheers!