Use angular conditional to display message based on array selection - angularjs

Question

I'm having trouble getting the messages from the messages array to display based on the user selected. I'm currently able to show all of the messages on the left side, but it needs to only show the selected message on the left, based on the user associated with it on the right. The message showing below each name, needs to be the message showing on the left when clicking the username.
the controller and directives
var movieApp = angular.module("movieApp",[]);
movieApp.controller("movieController",function($scope){
$scope.messages = [{
user:"aleksandra",
message:"this is aleksandras message"
},
{
user:"evan",
message:"this is evan message"
},
{
user:"tom",
message:"this is toms message"
},
{
user:"jarid",
message:"this is jarids message"
}];
$scope.response = [];
$scope.sendMessage = function(response){
$scope.toggle = $scope.toggle;
$scope.response.push(response);
console.log(response);
};
});
movieApp.directive("usersList", function(){
return {
restrict: "E",
scope: false,
template: "<p>Users</p>"+
"<ol class='list-unstyled animated fadeInDown'>"+
"<li ng-repeat='message in messages'>"+
"<h5 ng-click='showDetails = ! showDetails'>{{message.user}}</h5>"+
"<div ng-show='showDetails'>"+
"<p>{{message.message}}</p>"+
"</div>"+
"</li>"+
"</ol>"
};
});
movieApp.directive("messagesList", function(){
return {
restrict: "E",
scope: false,
template: "<div class='panel panel-primary'>"+
"<div class='panel-heading'>"+
"<span class='glyphicon glyphicon-comment'></span> Chat</div>"+
"<div class='panel-body body-panel'>"+
"<ol class='list-unstyled'>"+
"ONLY SHOW THE MESSAGE FOR THE USER SELECTED ON THE RIGHT"+
"<li ng-repeat='message in messages'>"+
"<p>{{message.message}}</p>"+
"</li>"+
"</ol>"+
"</div>"+
"<div class='panel-footer clearfix'>"+
"<form name='form'>"+
"<input type='text' name='message' ng-model='response' class='form-control' />"+
"<span class='col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12' style='margin-top: 10px'>"+
"<button class='btn btn-warning btn-lg btn-block' id='btn-chat' ng-click='sendMessage(messages)' ng-disabled='!form.message.$dirty'>Send</button>"+
"</span>"+
"</form>"+
"</div>"+
"</div>"
};
});
markup
<div ng-controller="chatController">
<div class="container">
<div class="row">
<div class="col-xs-9">
<messages-list></messages-list>
</div>
<div class="col-xs-3">
<users-list></users-list>
</div>
</div>
</div>
</div>
Current Plunker: Link

Answer 1

To achieve the solution you needed, call a method on usersList directive when clicked on userName and toggle the message
I have taken a toggleDetails() method on the directive.
<h5 ng-click='toggleDetails(message)'>{{message.user}}</h5>
Here is a code snippet for the same
chatApp.directive("usersList", function(){
return {
restrict: "E",
scope: false,
template: "<p>Users</p>"+
"<ol class='list-unstyled animated fadeInDown'>"+
"<li ng-repeat='message in messages'>"+
"<h5 ng-click='toggleDetails(message)'>{{message.user}}</h5>"+
"<div ng-show='message.showDetails'>"+
"<p>{{message.message}}</p>"+
"</div>"+
"</li>"+
"</ol>"
,
link: function(scope) {
scope.toggleDetails = function(message)
{
angular.forEach(scope.messages, function(value, key){
if(message != value)
value.showDetails = false;
});
message.showDetails = !message.showDetails;
}
}
}
});
Here is a Working DEMO

Answer 2

Here's an alternate that uses the $index of the ng-repeat so there isn't a need for the extra property on each message. Instead the controller $scope has a shownMessage property.
ng-repeat='message in messages' ng-if='shownMessage === $index'

Answer 3

var selectedUser;//get when user clicked
var selectedUserMessages=angular.filter('filter')($scope.messages,
{user:selectedUser});
you can now bind the found items where you want