0) Сперва почитай
это
1) Зачем 2 контроллера? Достаточно 1 контроллера с 2-мя методами в нём.
2) $scope - зло. Используй синтаксис
controllerAs
3) После добавления элемента нужно либо возвращать с бэкенда новый список (что не по REST), либо делай запрос (естественно в цепочке промисов). Ведь если данные обновятся с 2-х источников, будет рассинхрон.
4) Не используй $http().success, всегда используй then.
5)
<a href="{{x.url}}"> не сработает. Нужна директива ng-href.
Ну а код будет примерно такой:
function myService($http, $log) {
return {
addLink: addLink,
getLinks: getLinks
};
function addLink(data) {
$http.post('/api/links', data)
.then(function (response) {
$log.log('Success', response);
});
}
function getLinks() {
$http.get('/api/links')
.then(function (response) {
return response.data.records;
});
}
}
function MainController(myService) {
var vm = this;
vm.addLink = addLink;
function fetch() {
return myService.getLinks()
.then(function (links) {
vm.links = links;
});
}
function addLink() {
return myService.addLink({
'linkname': vm.linkname,
'url': vm.url
})
.then(function () {
vm.linkname = '';
vm.url = '';
return fetch();
});
}
}
angular.module('app', [])
.factory('myService', myService)
.controller('MainController, MainController');
<div ng-controller="MainController as main">
<form ng-submit="main.addLink()">
Name: <input type="text" ng-model="main.linkname"><br>
URL: <input type="text" ng-model="main.url">
</form>
<hr>
<ul>
<li ng-repeat="item in main.links">
<a ng-href="{{ item.url }}">{{ item.linkname }}</a>
</li>
</ul>
</div>
