How can I get my wordpress site to show a blog post in the same page without loading a new page using AngularJS?

I Have been trying a for a good part of the afternoon to get this working. I have managed to get it working when I am using static pages, however whenever I try to get it working with posts load in a repeat, it opens the post in a new page. What I want it to do is open that post in the same page without loading the page.

Could someone maybe point me in the right direction. Here is my current code below.

Media.js

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

mediaApp.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: '/pages/posts.html',
            controller: 'mediaCtrl'
        })
        .when('/:slug', {
            templateUrl: '/pages/single-post.html',
            controller: 'Content'
        })
        .otherwise({
            redirectTo: '/'
        });
    })

mediaApp.controller('mediaCtrl', function($scope, $http, $routeParams) {
        $http.get('wp-json/wp/v2/mediacentre').success(function(res){
            $scope.mediacentre = res;
        });
})

mediaApp.controller('Content',
        ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
            $http.get('wp-json/wp/v2/mediacentre/?filter[name]=' + $routeParams.slug).success(function(res){
                $scope.mediacentr = res[0];
            });
        }
    ]
);

Clippings.html

<ul>
    <li ng-repeat="mediacentr in mediacentre">
        <a href="{{mediacentr.slug}}">
            {{mediacentr.title}}
        </a>
    </li>
</ul>

single-post.html

<h1>{{post.title}}</h1>
{{post.content}}

archive-media-centre.php

<?php get_header(); ?>
<div class="media-main" ng-app="mediaApp" ng-controller="mediaCtrl">
    <div ng-view></div>
</div>

<script src="/js/media.js"></script>

</div>
<?php get_footer(); ?>

Any Help on this would be greatly appreciated.