title: add a css class to the body when a click happens
body: <p>Am struggling with AngularJS, any help would be appreciated. The issue is- I have a button at a div which when clicked should add a css class to the whole body of the app. Is it possible? Googling around suggested we could add the css class to the element in question.</p>
  
  <p>To elaborate:</p>
  
  <p>I have a main page that displays a form. It has a list of icons which when clicked should bring up a page showing details on the item and it should shift my main page to the left to make room for the details page.</p>
  
  <pre><code>    &lt;ul data-ng-controller="myctrl"&gt;
         &lt;li data-ng-click="showMe(0)"&gt;Item 1&lt;/li&gt;
         &lt;li data-ng-click="showMe(1)"&gt;Item 2&lt;/li&gt;
         &lt;span data-ng-include="template.url"&gt;&lt;/span&gt;
     &lt;/ul&gt;
  
     var myapp = angular.module("MyApp",[]);
     myapp.controller('myctrl', ['$scope','$element',function($scope,$element){
         $scope.templates = [ {name: "item1", url: "item1.html"},
                              {name: "item2", url: "item2.html"}];
         $scope.showMe = function(index) {
            $scope.template = $scope.templates[index];
            $element('body').addClass("shiftToLeft"); //does not seem to have an effect!
         }
     }]);
  </code></pre>
  
  <p>Thanks and regards!</p>