Angular Js ng-init is not working properly inside ng-repeat while setting a variable

Question

I have a ng-repeat where i am checking a if condition and at the end of each repeation of loop i am setting a variable to a value from ng-repeat

Here is my variable which i want to set inside the ng-repeat

$scope.prvSid = "";

Here is my ng-repeat code

<ul class="chats" ng-repeat="chatData in chatboxData">
    <li ng-class="{ 'out': chatData.sender_id == user_id , 'in': chatData.sender_id != user_id }">
         {{   prvSid }}
         {{   chatData.sender_id }}
        <span ng-if=" prvSid != chatData.sender_id ">
            <img class="avatar" alt="" src="{{ url('default/img/user_default_logo.jpg') }}" />
        </span>
        <div class="message">
            <span class="body"> {{ chatData.message }} </span>
        </div>
        <span ng-init="prvSid = chatData.sender_id"></span>
        {{   prvSid }}
    </li>
</ul>

The problem which i am facing here is that whenever i print these values inside the ng-repeat then prvSid and chatData.sender_id is printing the same id the value of chatData.sender_id even for the first iteration and that's why this

<span ng-if=" prvSid != chatData.sender_id ">

condition is not working and my image is not displaying because for the first iteration the condition should be true because prvSid is "" and chatData.sender_id has some id in it

The purpose of this is to Henry Zou the purpose is to not show profile picture for two or more messages submitted by same user (if the sender_id is same)Then dont display the profile image.When the new message comes from another sender which means sender_id is different then show the profile image

at first the prvSid will be null so it will show the image because condition will not match at the end of each iteration i will set the prvSid to the current iteration sender_id to match this prv_id with sender_id in the next iteration

i am also getting messages after two seconds and then i am adding the new records in the chatboxdata if they dont exist in it

$scope.getlasttwosecMsgs = function(user_id_chat,chat_id,user,chatboxData,is_new) {
      $http.get(url+'/getlasttwosecMsgs/'+chat_id).success(function(data){
        angular.forEach(data, function(value, key) {
          var exists = $scope.containsObject(value,chatboxData);
          if (!exists) {
            $scope.chatboxData.push(value);
            console.log($scope.chatboxData);
          };
        });
      });
    }
$scope.containsObject = function(obj, list) {
        var i;
        for (i = 0; i < list.length; i++) {
            if (angular.equals(list[i], obj)) {
                return true;
            }
        }

        return false;
    };

Answer 1

This new code snippet will check current userID against a list of users in the chatbox. For all users that's not the current user, show content.

approach #1 (preferred)

angular
  .module('app', [])
  .controller('myCtrl', function(){
  var vm = this;
  var prvSid = null;
  vm.chatboxData = [{id:1},{id:1},{id:2},{id:3}];
  
  vm.chatboxData.forEach(function(chatbox){
    if(prvSid !== chatbox.id){
      chatbox.showIcon = true;
    }
    prvSid = chatbox.id;
   });
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">
  <div ng-controller="myCtrl as vm">
    <ul class="chats" ng-repeat="chatData in vm.chatboxData">
      <li>
        <span ng-if="chatData.showIcon ">
            ICON
        </span>
        {{::chatData.id}}

      </li>
    </ul>
  </div>
</div>

approach #2

angular
  .module('app', [])
  .controller('myCtrl', function(){
  var vm = this;
  vm.prvSid = null;
  vm.chatboxData = [{id:1},{id:1},{id:2},{id:3}];
  
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">
  <div ng-controller="myCtrl as vm">
    <ul class="chats" ng-repeat="chatData in vm.chatboxData">
      <li>
        <span ng-if="chatData.showIcon ">
            ICON
        </span>
        {{::vm.prvSid}} {{::chatData.id}}
        <span ng-init="chatData.showIcon = (vm.prvSid !== chatData.id)"></span>
        <span ng-init=" vm.prvSid = chatData.id"></span>

      </li>
    </ul>
  </div>
</div>

approach #3 (without using controllerAs syntax)

angular
  .module('app', [])
  .controller('myCtrl', function($scope){
  var prvSid = null;
  $scope.chatboxData = [{id:1},{id:1},{id:2},{id:3}];
  
  $scope.chatboxData.forEach(function(chatbox){
    if(prvSid !== chatbox.id){
      chatbox.showIcon = true;
    }
    prvSid = chatbox.id;
   });
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">
  <div ng-controller="myCtrl">
    <ul class="chats" ng-repeat="chatData in chatboxData">
      <li>
        <span ng-if="chatData.showIcon ">
            ICON
        </span>
        {{::chatData.id}}

      </li>
    </ul>
  </div>
</div>

OLD ANSWER

In the video AngularJS MTV Meetup: Best Practices (2012/12/11), Miško explains "..if you use ng-model there has to be a dot somewhere. If you don't have a dot, you're doing it wrong.."

ng-repeat creates an inherited scope (think javascript prototype) for each item.

This code below will create $scope.prvSid for each item in the array and the value will always be chatData.sender_id.

<span ng-init="prvSid = chatData.sender_id"></span>

If you meant it to only have 1 instances of prvSid id, then what you'll need to do is initialize prvSid variable at the parent scope first (or use the dot(.) rule)

<div ng-init="prvSid = null"> <!-- initializing prvSid id @ parent scope -->
<ul class="chats" ng-repeat="chatData in chatboxData">
    <li ng-class="{ 'out': chatData.sender_id == user_id , 'in': chatData.sender_id != user_id }">
         {{   prvSid }}
         {{   chatData.sender_id }}
        <span ng-if=" prvSid != chatData.sender_id ">
            <img class="avatar" alt="" src="{{ url('default/img/user_default_logo.jpg') }}" />
        </span>
        <div class="message">
            <span class="body"> {{ chatData.message }} </span>
        </div>
<!-- this will now update the parent scope's prvSid instead of creating a new one for each item in the array -->
        <span ng-init="prvSid = chatData.sender_id"></span>
        {{   prvSid }}
    </li>
</ul>
</div>