changing span text in li using angularjs

I have html something like...

<ul id="sidemenu" class="wraplist wrapper-menu">
 <li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
    <span class="arrow material-icons">arrow_down</span>
 <li>
 <li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
    <span class="arrow material-icons">arrow_down</span>
 <li>
<ul>

on ng-click=makeActive(), I want to change the value 'arrow_down' to 'arrow_right' of that particular < li> element only. and if again the same is clicked I want to change it to 'arrow_down'. Rest all < li> will have span text unchanged. How can I do this using angularjs? i.e. by using angular.element? OR is there any other way?

keyboardArrow refers to only one variable. So you have to create two scope variables: keyboardArrow1 and keyboardArrow2

<ul id="sidemenu" class="wraplist wrapper-menu">
     <li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
        <span class="arrow material-icons">{{ keyboardArrow1 }}</span>
     <li>
     <li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
        <span class="arrow material-icons">{{ keyboardArrow2 }}</span>
     <li>
<ul>

Update

According to your needs, here is a plunker.