class - ng-click isn't working properly -

I'm trying to add / remove a cylinder with 3 buttons, for some reason it sometimes takes more than one click to work

  & lt; One square = "small button" & gt; & Lt; I class = "icon-circle-arrow-up" ng-click = "select ('slide')" ng-square = "{active: 'slide' == selected}" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; One square = "small button" & gt; & Lt; I square = "icon-size-horizontal" ng-click = "select ('wave')" ng-square = "{active: 'wave' == selected}" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; One square = "small button" & gt; & Lt; I class = "icon-repeat" ng-click = "selection ('role')" ng-square = "{active: 'role' == selected}" & gt; & Lt; / I & gt; & Lt; / A & gt;   
 Javascript:  
  myApp.controller ("TodoCtrl", function ($ radius, $ http) {$ scope.slide = "one"; $ Scope.animate = "slide"; $ scope.selected = "slide"; return $ scope.select = function (item) {$ scope.selected = item; return $ scope.animate = item;};});   
 plunkr:  
   
 
 
 change  
  & lt; One square = "small button" & gt; & Lt; I class = "icon-circle-arrow-up" ng-click = "select ('slide')" ng-square = "{active: 'slide' == selected}" & gt; & Lt; / I & gt; & Lt; / A & gt;   
 to  
  & lt; Select a class = "button small" ng-click = "('slide')" & gt; & Lt; I class = "icon-circle-arrow-up" ng-class = "{active: 'slide' == selected}" & gt; & Lt; / I & gt; & Lt; / A & gt;   
 You have ng click on the actual icon, not the entire button