something like this:

add ng-class="{slide:slideFlag}"

in controller

$scope.showSettings = function () { $timeout(function () { $scope.settings = true; $timeout(function () { $scope.slideFlag = true; }, 250); }, 250); 

and in css:

.slide{ transition: all 0.5s; margin-left:200px; } 

something like this:

add ng-class="{slide:slideFlag}"

in controller

$scope.showSettings = function () { $timeout(function () { $scope.settings = true; $timeout(function () { $scope.slideFlag = true; }, 250); }, 250); 

and in css:

.slide{ transition: all 0.5s; margin-left:200px; } 

here is a working fiddle: http://jsfiddle.net/q5cqh9qj/

also, the reason for using two timeouts is, you can't run transition while you are changing display property (settings = true;)

something like this:

add ng-class="{slide:slideFlag}"

in controller

$scope.showSettings = function(){  $timeout(function() {   $scope.settings = true; $scope.slideFlag = true;   }, 250,);  } 

and in css:

.slide{ transition: all 0.5s; left:200px; } 

something like this:

add ng-class="{slide:slideFlag}"

in controller

$scope.showSettings = function () { $timeout(function () { $scope.settings = true; $timeout(function () {  $scope.slideFlag = true;    }, 250);   }, 250); 

and in css:

.slide{ transition: all 0.5s; margin-left:200px; }