How do I have a form submit values to an ng-repeat list item that's on the same page?

Question

I asked this as part of another question yesterday, but I think it is best to break this into its own question.

I have a registration form which asks the user for name, address, email, etc. In return, smartystreets API returns suggested addresses correcting a possibly mistyped address. What I have (all on one page) is 1) the registration form and 2) a hidden list-item which I want to populate with the returned addresses (via ng-repeat), which will eventually be unhidden as a popup via Jquery UI.

So, the main issue is how to have the list-item populated via ng-repeat since the registration page is loaded before any data can populate the list item.

I have used ng-repeat to populate li's when the data existed already, but I'm confused about what to do in this situation when the data will be passed post-page load.

Answer 1

Just use your array in ng-repeat like you would do it with any other. I prefer to define it in the controller before just that I know that there is something but angular can also handle that for you.

<li ng-repeat="address in addresses">

As aet allready mentioned in the comments, angular watches for changes in your ng-repeat item so it gets updated whenever you change it. For example when you run an ajax request:

$http({method: 'GET', url: '/api/smartystreets/whatever'}).success(function(addresses) {
    $scope.addresses = addresses;
});

It doesn't actually matter if the data is allready there, the async action is started on page load or later on with ng-change or anything else.

This is one of the strengts of angular, the two way databinding. The only point where you need to do some more work is when you use any async event which is not "covered" by angular and therefore requires you to run the digest cycle yourself using $apply.