why this angularjs animation does not work?

The animation doesn't work. I could not fint what I am wrong.

Here is the code.

HTML

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-aria.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-messages.js"></script>
        <script src="js.js"></script>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <div ng-app="myApp" ng-controller="AppCtrl">
            <div ng-hide="hidden == true" ng-animate="'slide'">
                <h1>Come and get it!</h1>
            </div>
            <div ng-hide="hidden == false" ng-animate="'slide'">
                <h1>Fine.</h1>
            </div>
            <div>
                <button ng-click="hidden=true">I don't want it</button>
                <button ng-click="hidden=false">I want it</button>
            </div>
        </div>
    </body>
</html>

CSS

.slide-container {
    height: 100px;
    position: relative;
}
.slide-container > * {
    display:block;
    width:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:10px;
}
.slide-hide, .slide-show {
    -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: absolute;
}
.slide-hide {
   background: red;
    display: none;

}
.slide-hide.slide-hide-active {
   background: red;
display: none;

}
.slide-show {
  background: red;
    position: relative;
    left: 100px;
}
.slide-show.slide-show-active {
   background: red;
    position: relative;
    left: 0px;
}

JS

angular.module('myApp', [])
    .controller('AppCtrl', function ($scope) {
    $scope.hidden = false;
});

I got this code from http://jsfiddle.net/elthrasher/Uz2Dk/. In the fiddle, It works perfectly, but once I moved the code in my editor, I doesn't work! I just want to get the function that when a button is clicked, the contents are changed with an animation. For example, left flying animation.