Two way data binding in Angular with POST request from modal

See more:

AngularJs

Hello all,

I have an issue with data binding. I am using the angulat boostrap modal to send a post request to a Laravel API and I am receiving the proper information. I am pushing the result in an array, the array is updated but the DOM isn't.

Can you please point me in the right direction?

This is the form I'm using in the modal:

angular.module('app.dashboard.projects')
        .controller("ProjectsController", function($scope, $modal, $resource, ProjectsFactory){
            $scope.Projects = {};
            $scope.new_project = {};
    
            $scope.createModalNewProject = function(){
                // console.log("bla");
                var modalInstance = $modal.open({
                    templateUrl: 'js/modules/projects/views/new-project.html',
                    controller : ModalController
                });
            };
    
            $scope.createProject = function () {
                ProjectsFactory.create($scope.new_project).$promise.then(function(data){
                    console.log(data.projects);
                    $scope.Projects.push(data.projects);
                    console.log($scope.Projects);
                    console.log(showAll());
                });
            };
    
            $scope.updateList = function(){
                $scope.Projects.push(data.projects);
            };
    
            showAll();
            function showAll(){
                ProjectsFactory.show().$promise.then(function(data){
                    return $scope.Projects = data.projects;
                });
            };
        });

This is the controller in angular:

angular.module('app.dashboard.projects')
        .controller("ProjectsController", function($scope, $modal, $resource, ProjectsFactory){
            $scope.Projects = {};
            $scope.new_project = {};
    
        $scope.createModalNewProject = function(){
            // console.log("bla");
            var modalInstance = $modal.open({
                templateUrl: 'js/modules/projects/views/new-project.html',
                controller : ModalController
            });
        };
    
            $scope.createProject = function () {
                ProjectsFactory.create($scope.new_project).$promise.then(function(data){
                    $scope.Projects.push(data.projects);
                });
            };
    
            $scope.updateList = function(){
                $scope.Projects.push(data.projects);
            };
    
    
    
            showAll();
            function showAll(){
                ProjectsFactory.show().$promise.then(function(data){
                    return $scope.Projects = data.projects;
                });
            };
        });

This is the factory that I'm using:

angular.module('app.dashboard.projects')
        .factory('ProjectsFactory', function ($resource) {
            return $resource('api/v1/projects/:projectId', {}, {
                show: { method: 'GET' },
                create: { method: 'POST' },
                update: { method: 'PUT', params: {id: '@id'} },
                delete: { method: 'DELETE', params: {id: '@id'} }
            })
        });

Reference to the modal module:
http://angular-ui.github.io/bootstrap/[^]