Для правильной работы кода ваш объект allMessages.files должен быть массивом.ng-repeat работает только над коллекцией.Это означает, что ваш allMessages объект будет выглядеть следующим образом:
[{
sender_username: "",
messages: "",
files: [
"",
""
]
}]
См. Рабочий фрагмент ниже:
angular.module('testApp', [])
.controller('TestAppController', function($scope) {
$scope.allMessages = [
{
sender_username: "John.Doe",
messages: "Sample Message",
files: [
"file 1",
"file 2"
]
},
{
sender_username: "Janet.Doe",
messages: "Hi! Whats up?",
files: [
"Cinnamon.jpg",
"Black_tea.png"
]
}
];
});
.card{
border: 1px solid grey;
margin: 10px
}
div.card div{
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
<body ng-app="testApp" ng-controller="TestAppController">
<div ng-repeat="x in allMessages">
<div class="card testimonial-card btn-rounded p-1 mb-2">
<strong>@{{x.sender_username}}</strong>
<p>{{x.messages}}</p>
<div ng-repeat="file in x.files">
{{file}}
</div>
</div>
</div>
</body>