Untitled

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="controller">
   <div class="container" >
    <div ng-repeat="user in users">
      <div ng-repeat="message in messages">
        <span ng-if="user.userId == message.userId"  ng-repeat="text in message.messages">{{text.text}}</span>
      </div>
        {{ user.userId }}<br />
        {{ user.username }}<br />
        {{ user.password }}<br />
        <hr />
    </div>
    <input type="text" ng-model="username" placeholder="Username"><br />
    <input type="text" ng-model="password" placeholder="Password"><br />
    <button ng-click="add()">Add user</button>
</div>
  </body>

</html>

// Code goes here

var app = angular.module('myApp', []);



app.service("users", function() {
    this.userList = [
        {
            userId: 1,
            username: "Bobi",
            password: "Ristov"
        },
        {
            userId: 2,
            username: "Bobi 1",
            password: "Ristov 1"
        }
    ];
    this.text = function() {
        return "Hello";
    };
});

app.service("userMessages", function() {
    this.messages = [
        {
            userId: 1,
            messages: [
                {
                    text: "This is a message from user 1"
                },
                {
                    text: "This is another message from user 1"
                }
            ]
        },
        {
            userId: 2,
            messages: [
                {
                    text: "This is a message from user 2"
                },
                {
                    text: "This is another message from user 2"
                }
            ]
        }
    ]
});


app.controller("controller", function($scope, users, userMessages) {
    $scope.users = users.userList;
    $scope.messages = userMessages.messages;

    var id = $scope.users.length

    $scope.add = function() {
        $scope.users.push(
            {
                userId: ++id,
                username: $scope.username,
                password: $scope.password
            }
        );
        $scope.username = "";
        $scope.password = "";
    };
});

/* Styles go here */