I am new to AngularJs and Javascript, so I am going to do my best to try to explain the problem. My Angular controller receives data from a method in my MVC Controller. Each time the script is run, the MVC Controller returns 1 item. I am trying to dynamically expand the item list in my html page each time a new item is returned using ng-repeat in an unordered list. When I use ng-repeat, the first item does not show until the second item is added and then they both show together. If I add a 3rd item, the items display strangely. Here is an example of iterations with ng-repeat:

**Iteration 1:**

blank

**Iteration 2:**

Item 1

Item 2

**Iteration 3:**

["Item1", "Item2"]

Item 3

The 3rd iteration literally shows up with the brackets and the quotation marks instead of the bullets for the unordered list. Can anyone tell me what is happening?

Here is the Angular controller code:

```
     $scope.addState = function () {
        //debugger;
        companyService.addState($scope.form)
        .success(function (data) {
            if (pass == 0) {
                $scope.addedStates = data;
                pass = pass + 1;
            }
            else {

                addedStates = [
                    angular.copy($scope.addedStates),
                    data

                ];
                $scope.addedStates = addedStates;

            }
            $scope.rmgStates = $scope.rmgStates - 1;

            if($scope.rmgStates == 0)
            {
                $scope.canSubmit = true;
                $scope.lastState = false;
            }
            else {
                $scope.canSubmit = false;
                $scope.lastState = true;
            }
        })
    };

```

Here is the html code:

```
                        You have added the following States:<br />
                    <ul>
                        <li ng-repeat="item in addedStates">
                            {{item}}
                        </li>
                    </ul>

```

Any and all help is greatly appreciated.