Update Models after save without refreshing - angularjs

Question

I'm building a list in my app, which users can add to. Once they add their item and hit the save button, I would like the item they added to appear instantly on the list, and for the input box to clear. Here is my save function in my controller. It works fine when I reload the page but I think there is a way to bind by updating the model through the database. Thank you!
export class QuestionDetailsController {
public question;
public answer;
public id;
public save() {
this.answerService.save(this.answer, this.question.id).then(() => { this.$location.path("$location.path") });//how to update models?
}
constructor(
private answerService: MyApp.Services.AnswerService, private $location: angular.ILocationService, private questionService: MyApp.Services.QuestionService, $routeParams: ng.route.IRouteParamsService)
{
this.question = this.questionService.get($routeParams["id"])
}
And now HTML page
<!--<legend id="qdLegend">{{controller.question.title}}</legend>-->
<h2 id="qdLegend">{{controller.question.title}}</h2>
<hr id="qdhr" />
<div id="questionDiv">
<div class="col-md-7" id="questionBody">
<p>{{controller.question.userQuestion}}</p><br /><br />
</div>
</div>
<div class="col-md-7">
<div id="answerDiv" ng-repeat="a in controller.question.answers">
{{a.userAnswer}} --answered by {{a.userName}}
</div>
</div>
<form ng-submit="controller.save()">
<div>
<div class="form-group col-md-7" id="answerBox">
<label class="control-label" for="textarea">Your Answer</label>
<textarea ng-model="controller.answer.userAnswer" class="form-control" id="textarea1" name="textarea"></textarea>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="button1id"></label>
<div class="col-md-8" id="detailsButtons">
<button type="submit" id="button1id" name="Save" class="btn btn-success">Save</button>
<button id="button2id" name="button2id" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</form>

Answer 1

Okay, I don't have a running typescript compiler at the moment, so I'll give you some hints and some untested code here.
public save() {
this.answerService.save(this.answer, this.question.id)
.then(() => {
this.question.answers.push(angular.copy(this.answer));
this.answer = {};
});
}
When the service returns succes you add the answer the the questions list of answers. I use angular.copy() to break the references so you can add multiple answers with no references issues.
After this I just overwrite the object with an empty one.
This is fairly simple. AngularJS docs have an example in the same style.
Here is a simplified plunker showing the action with a javascript controller. This should be no problem for you to get a hold of how it should be done.
As a note to the question, please supply minified examples to make it faster to understand your question.