Angular-js: How to use of ng-click with ng-if
<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>