<html ng-app="myApp" ng-controller="View as vm">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<md-button class="md-raised"
id="starter"
ng-click="changeState('left')">
Click to change left div position with animation
</md-button>
<div
ng-if="in">
<span ng-if="in">Side</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="js.js"></script>
</body>
</html>
var myApp = angular.module('myApp', ['ngMaterial', 'ngAnimate']);
myApp.controller('View', function ($scope) {
// start
$scope.in = false;
$scope.directions = {
false: 'right',
true: 'left'
}
$scope.changeState = function(direction){
$scope.in = !$scope.in; //handle the ng-if
}
});
/* Styles go here */
#starter{
float:right;
}