angular.js ng-hide not working

I am having an issue with using ng-hide. With all of the code below, I am able to get everything working the way I want it to until I add the ng-hide attribute, at which point it refuses to show ANY of the images. If I leave it out, the images all show up like I expect, leaving me to believe my controller is working correctly and I have hooked into it correctly. What am I not understanding? Also, you will see I put an alert in the function to make sure it is being called, but I cannot for the life of me get an alert box to work using angular.

app.js

(function () {
    var app = angular.module("mainApp", []);

    app.controller("StoriesListController", ["$http", StoriesListController]);

    function StoriesListController($http) {
        var vm = this;

        vm.title = "Tutorial List";
        vm.imageIndex = 0;

        activate();

        function activate() {
            vm.stories = [];
            $http.get("api/Story").then(function (response) {
                vm.stories = response.data;
            });
        }

        vm.setCurrentImage = function (index) {
            vm.imageIndex = index;
        };

        vm.isCurrentImage = function (index) {
            alert(index);
            return vm.imageIndex === index;
        };
    }
}());

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainApp">
<head>
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script type="text/javascript" src="Scripts/App.js"></script>
    <link href="/Content/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <h1>TEST</h1>
    <div ng-controller="StoriesListController as vm">
        <h1>{{vm.title}}</h1>
        <div class="container slider">
            <div ng-repeat="story in vm.stories">
                <img ng-src="{{story.PreviewImageURL}}" ng-hide="!isCurrentImage($index)" class="slide" />
            </div>
        </div>
    </div>
</body>
</html>

StoryController.cs (the API I am calling to fill stories)

namespace AngularWebApi.Controllers
{
public class StoryController : ApiController
{
    private static readonly List<Story> apps = new List<Story>
    {
        new Story
        {
            ID = 1,
            Name = "Test 1",
            Descript = "Test 1 Desc",
            PreviewImageURL = "/Images/Test1.png",
            Views = 1,
            Ranking = 1
        },

        new Story
        {
            ID = 2,
            Name = "Test 2",
            Descript = "Test 2 Desc",
            PreviewImageURL = "/Images/Test2.png",
            Views = 1,
            Ranking = 2
        },

        new Story
        {
            ID = 3,
            Name = "Test 3",
            Descript = "Test 3 Desc",
            PreviewImageURL = "/Images/Test3.png",
            Views = 1,
            Ranking = 3
        },
    };

    public IHttpActionResult Get()
    {
        return Ok(apps);
    }
}
}

Solution

I think you just miss vm. Try ng-hide="!vm.isCurrentImage($index)".