title: Apply single service logic to two similar buttons
body: <p>I have a function in my <code>ReverseService</code> service. I am using this <code>service</code> in my <code>controller</code>. Calling it on <code>ng-click</code>. The problem is, I am calling the same function for two <code>ng-click</code>s, and hence being applied for both where I want it to be applied for only one (the one that I click). I know why this is happening, but I am not able to come up with a solution. Here is the code.<br>
  <strong>HTML</strong>  </p>
  
  <pre><code>&lt;div id="sidebar" ng-controller="SideCtrl"&gt;
              &lt;!-- here goes a static sidebar --&gt;
              &lt;div class="large_3_custom columns"&gt;
                  &lt;ul class="side-nav side_nav_custom"&gt;
                      &lt;li&gt;
                          &lt;img src="images/dashboard.png" alt=""&gt;
                          &lt;a href="#"&gt;DASHBOARD&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img ng-src="images/company_profile.png" alt=""&gt;
                          &lt;a href="#"&gt;COMPANY PROFILE&lt;/a&gt;
                          &lt;img ng-src="{{images.current}}" ng-click="swapHere();subSec = !subSec" id="arrowRotate"&gt;
                      &lt;/li&gt;
                      &lt;li ng-show="subSec"&gt;
                          &lt;img src="" alt=""&gt;
                          &lt;a href="#"&gt;SERVICES&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li ng-show="subSec"&gt;
                          &lt;img src="" alt=""&gt;
                          &lt;a href="#"&gt;EMPLOYEES&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img src="images/statistics.png" alt=""&gt;
                          &lt;a href="#"&gt;STATISTICS&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img src="images/reviews.png" alt=""&gt;
                          &lt;a href="#"&gt;REVIEWS&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img src="images/tips_advice.png" alt=""&gt;
                          &lt;a href="#"&gt;TIPS &amp; ADVICE&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img src="images/deals.png" alt=""&gt;
                          &lt;a href="#"&gt;DEALS&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img src="images/media.png" alt=""&gt;
                          &lt;a href="#"&gt;MEDIA&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img src="images/price_list.png" alt=""&gt;
                          &lt;a href="#"&gt;BOOKING&lt;/a&gt;
                          &lt;img ng-src="{{images.current}}" ng-click="swapHere();bookSec = !bookSec" id="arrowBook"&gt;
                      &lt;/li&gt;
                      &lt;li ng-show="bookSec"&gt;
                          &lt;img src="" alt=""&gt;
                          &lt;a href="#"&gt;CALENDAR&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img src="images/market.png" alt=""&gt;
                          &lt;a href="#"&gt;MARKET&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img src="images/sponser_deal.png" alt=""&gt;
                          &lt;a href="#"&gt;SPONSOR A DEAL&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;img src="images/extra_services.png" alt=""&gt;
                          &lt;a href="#"&gt;EXTRA SERVICES&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
  </code></pre>
  
  <p><strong>Angular</strong>  </p>
  
  <pre><code>var myApp = angular.module("myApp", []);
  myApp.service("ReverseService", function() {
      // service func goes here --
      this.imgSwap = function(images) {
          if (images.current === images.finalImage) {
              images.current = images.initialImage;
          } else if (images.current === images.initialImage) {
              images.current = images.finalImage;
          }
      };
  });
  myApp.controller("SideCtrl", function($scope, ReverseService) {
      console.log("thomas");
      $scope.myData = {};
      $scope.images = {
          initialImage: "images/prof_arrow1.png",
          finalImage: "images/prof_arrow.png",
          current: "images/prof_arrow1.png"
      };
      $scope.swapHere = function() {
          ReverseService.imgSwap($scope.images);
      };
      $scope.subSec = false;
      $scope.bookSec = false;
  });
  </code></pre>
  
  <p>Here is a <a href="http://plnkr.co/edit/ONac8RGNplWrMF6aWAsd?p=preview" rel="nofollow">Plunker.</a></p>