title: Angular-js: How to use of ng-click with ng-if
body: <p>I have created a chatbox in angular JS and now I want to show notification bubble when ever I click on any user. I tried to use this with ng-click and and ng-if but failed.
  Here is the code I am using</p>
  
  <pre><code>     &lt;div class="people"  &gt;
              &lt;div ng-repeat="user in allCompanyUsers"&gt;
                  &lt;div class="person" ng-click="activateChat(user)" id="chat_{{user.id}}"&gt;
                      &lt;img alt="" /&gt;
                      &lt;span class="name" &gt;{{user.firstName}} {{user.lastName}}
                      &lt;span   ng-show="!user.showNotification" class="noti_bubble"&gt;5&lt;/span&gt; 
  
  
                      &lt;span class="preview"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
  </code></pre>
  
  <p>And on controller side:</p>
  
  <pre><code>    $scope.showNotification = false;
  
      $scope.allCompanyUsers = AllCompanyUsers.query();
  
      $scope.activateChat = function(user){
          console.log(user);
  
          $scope.activeConversations = [];
          UserMessages.query({toUser:user.login}).$promise.then(function(data) {
                 angular.forEach(data, function(message) {
                     $scope.activeConversations.push({'message':message.message,'type':message.type, 'time': message.time});
                 });
          });
  
          $scope.activePerson=user.login;
          $scope.showNotification = true;
          $scope.isDisabled=true;
              /*$scope.activeConversations=user.chat;*/
          $('.left .person').removeClass('active');
          var el = angular.element( document.querySelector('#chat_'+user.id));
          el.addClass('active');   
      };
  </code></pre>
  
  <p>Currently the count is hardcoded.
  Here All users are showing with 5 bubble but I want that only selected user will show the bubble...</p>
  
  <p>any kind of help is appreciated. Thanks in advance</p>