AngularJS $interval start and cancel going haywire

I am trying to make a "slider" - content changing on interval. I want the content to change at the interval, and then when hover over with mouse it pauses, and continues when you mouseout. Also there are buttons at the bottom, one for each content item, when you click one, it cancels the interval, moves to that item and then starts moving through the content again from that item. ...pretty standard.

Right now, it begins by going through the content fine, and the mousein/out pausing works fine, but when I click one of the buttons to skip to that item the interval speed starts going haywire and I can no longer pause it when hovering over it.

I have console logged my cancel function which should retu TRUE if the interval has indeed been canceled. When I hover over the content and it pauses, it does in fact retu true. But when I click one of the buttons (which also calls the same cancel function), it retus FALSE, and then of course starts going haywire (I am thinking because maybe it is starting another interval on top of the other one?).

So....why isn't it canceling when the button is clicked?

Here is the code, there is more details about the question commented in the code. Thanks for any help.

//get the content data from database and calling the function to start the interval

var data = {};
data.fn = 'sliderTestimonials';
services.getData(data).success(function(data){
    $scope.quotes = data;
    $scope.count_limit = data.length - 1;
    $scope.theSlider(0);
});
//takes an id, uses that to get the needed content item, then calls the actual interval function

$scope.theSlider = function(id){
    $scope.count = id;
    $scope.single_quote = $scope.quotes[$scope.count];
    $scope.startSlider();
}
//the interval, counts up unless it reaches the last item then it starts over at begiing. 

$scope.startSlider = function(){
    $scope.slider = $interval(function(){
        if($scope.count >= $scope.count_limit){
            $scope.count = 0;
            $scope.single_quote = $scope.quotes[$scope.count];
        }else{
            $scope.count++;
            $scope.single_quote = $scope.quotes[$scope.count]; 
        }
    }, 2000);
}
//the function called when a button is clicked to move to that item, takes the id from that item, cancels the interval, then passes the content id to the slider function to start a new interval begiing at the content item of the passed id

$scope.buttonStop = function(id){
    $scope.cancelSlider();
    $scope.theSlider(id);
}
//The cancel interval function. The console log is retuing true when I call this function from ng-mouseover in the DOM, but then retus FALSE when it is called by the above buttonStop function, which I do not know why, seems to me no reason for it not to cancel the interval and retu true.

$scope.cancelSlider = function(){
    if (angular.isDefined($scope.slider)){
        var test = $interval.cancel($scope.slider);
        console.log(test);
        $scope.slider = null;
    }
}

The HTML where these are being called -

<div class="row slider" ng-mouseover="cancelSlider()" ng-mouseout="startSlider()">
    <div class="col-md-12 relative">
        <div class="triangle-isosceles triangle-isosceles-left quote-heading"><span class="quote-left pull-left">“</span><span class="quote-right pull-right">”</span></div>
        <p class="quote-text text-center" pagecontent="single_quote.quote_text"></p>
        <div class="seperator"></div>
        <div class="quote-title text-center"><span>{{single_quote.owner}}</span> {{single_quote.owner_detail}}</div>
        <div class="slider-buttons">
            <span ng-click="buttonStop($index)" ng-repeat="quote in quotes track by $index" ng-class="{'circle-active' : count == $index}" class="circle"></span>
        </div>
    </div>
</div>