How to update data in table after $http.post request in AngularJS?

Question

PHP

Task: after pressing the button, an element is added to the table. The newly added element is displayed only after a page refresh. It is necessary that with the addition of a click on the button, the table is updated and there would be no need to reload the page once again.

app.controller('addUrlCtrl', function($scope, $http){
    $scope.insertUrl = function(){
        $http.post('../addlink.php',{'linkname': $scope.linkname, 'url': $scope.url})
            .success(function(data, status, headers, config){
            alert("Ссылка добавлена!");
        });
    }
});

app.controller('getUrlCtrl', function($scope, $http){
            $http.get('../getlink.php').then(function(response){
            $scope.urlData = response.data.records; 
        });
});

getlink.php code:

<?php
    session_start();
    header("Access-Control-Allow-Origin: *");
    header("Content-Type: application/json; charset=UTF-8");
    
    $conn = new mysqli("localhost", "mysql", "mysql", "developer-note");

    $result = $conn->query("SELECT linkname, url FROM linkbase WHERE username = '".$_SESSION['username']."'");

    $outp = "";
    while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
        if ($outp != "") {$outp .= ",";}
        $outp .= '{"linkname":"'  . $rs["linkname"] . '",';
        $outp .= '"url":"'. $rs["url"]     . '"}'; 
    }
    $outp ='{"records":['.$outp.']}';
    $conn->close();

    echo($outp);
?>

addlink.php code:

<?php
    require_once("connection.php");
    
    $data = json_decode(file_get_contents("php://input"));
    
    $linkname = mysql_real_escape_string($data->linkname);
    $url = mysql_real_escape_string($data->url);
    $urlquery = mysql_query("INSERT INTO linkbase (username, linkname, url) VALUES('".$_SESSION['username']."','$linkname', '$url')");
?>

table display html code:

<form ng-controller="addUrlCtrl" name="urlForm">
      <h2>Добавить ссылку</h2>
       <input type="text" name="linkname" placeholder="Наименование ссылки" ng-model="linkname">
       <input type="url"name="url" placeholder="URL ссылки" ng-model="url">
       <button ng-click="insertUrl()">Отправить</button>
</form>
<div ng-controller="getUrlCtrl">
          <table>
               <th>Имя ссылки</th>
               <th>URL ссылки</th>
               <tr ng-repeat="x in urlData | filter: search">
                       <td>{{ x.linkname }}</td>
                       <td><a href="{{x.url}}">{{ x.url }}</a></td>
               </tr>
        </table>
</div>

Answer 1

0) Read this
first 1) Why 2 controllers? Enough 1 controller with 2 methods in it.
2) $scope is evil. Use the controllerAs
syntax 3) After adding an element, you must either return a new list from the backend (which is not REST), or make a request (of course, in a chain of promises). After all, if the data is updated from 2 sources, it will be out of sync.
4) Don't use $http().success, always use then.
5) <a href="{{x.url}}">won't work. You need the ng-href directive.
Well, the code will be something like this:

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>

Answer 2

If the data is successfully sent, add it to urlData, or completely reload urlData.