AngularJS displaying a list of objects from rest endpoint?
<p>I have a Hipster application that I want to use to display a list of words on a page generated by user input. Ex: A user enters the string 'ba' and the application generates a list of all words that are in a local data structure that begin with 'ba'. What I'm trying to figure out is how to pass the string back to the server and return a list. Is that what the <code>$scope</code> variable is for? I think what I'm trying to figure out is how to implement 2-way data binding...</p>

<p>RestController:</p>

<pre><code>@RestController
@RequestMapping("/api")
public class WordResource {

private final Logger log = LoggerFactory.getLogger(WordResource.class);

@Inject
private TreeService treeService;

/**
 * GET  /words : get all the words.
 *
 * @return the ResponseEntity with status 200 (OK) and the list of words in body
 */
@RequestMapping(value = "/words",
    method = RequestMethod.GET,
    produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public List&lt;Word&gt; getAllWords() {
    log.debug("REST request to get all Words");
    return treeService.getAllWords();
}

/**
 * GET  /words : get all the words.
 *
 * @return the ResponseEntity with status 200 (OK) and the list of words in body
 */
@RequestMapping(value = "/ten-words",
    method = RequestMethod.GET,
    produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public List&lt;Word&gt; getSubWords(@PathVariable String word) {
    log.debug("REST request to get all Words");
    return treeService.getTenWordsFrom(word);

}
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;div ng-cloak&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"/&gt;
    &lt;!--/*@thymesVar id="pageTitle" type=""*/--&gt;
    &lt;title th:text="${pageTitle}"&gt;title placeholder&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;

    &lt;link rel="stylesheet" href="https://bootswatch.com/superhero/bootstrap.min.css"/&gt;

    &lt;!-- Polyfill(s) for older browsers --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form&gt;
    &lt;div class="form-group"&gt;
        &lt;input type="text" name="searchStr" class="form-control" placeholder="Search Words..."/&gt;
    &lt;/div&gt;
&lt;/form&gt;


&lt;div class="row well"&gt;
    &lt;div class="col-md-4"&gt;

        &lt;!--word list goes here--&gt;

    &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

&lt;/div&gt;
</code></pre>

<p>Controller:</p>

<pre><code>(function() {
'use strict';

angular
    .module('treeWordsApp')
    .controller('HomeController', HomeController);

HomeController.$inject = ['$scope', 'Principal', 'LoginService', '$state'];

function HomeController ($scope, Principal, LoginService, $state) {
    var vm = this;

    vm.account = null;
    vm.isAuthenticated = null;
    vm.login = LoginService.open;
    vm.register = register;

    $scope ({


    });

}
})();
</code></pre>