Angular update html from another section

Question

I have a couple of places on my project where I'm trying to make a form open up from a different html section. I couldn't find any clear answer on how to do this.

To explain more: After filling in the form, clicking create does work, it creates the new task, and the task is being created on the server, but it won't show up in the table until I refresh the page and reload the HTML. I do have a function to retrieve the tasks from the server, and it runs, all new tasks are stored in my model (main.items), but the HTML doesn't refresh it.

Example 2: When I click this edit button, it won't open up the form. The delete button does work, and makes the line disappear, but it's in the same table.

The simplified code:

HTML

<div ng-cotroller="MainController as main">
    <div>
        <button ng-click="main.openForm()">Add New</button>
    </div>
    <div ng-show="main.showForm">
        <form>
        ...
        </form>
    </div>
</div>
...
<table ng-cotroller="MainController as main">
    <thead><tr><th>...</th></thead>
    <tbody>
        <tr ng-repeat="item in main.items">
            <td>{{item.id}}</td>
            ...
            <td><i class="..." ng-click="main.openForm()></i></td>
        </tr>
    </tbody>
</table>

Angular

app.controller('MaintenanceController', ['$http', function($http){
    var main = this;
    main.items = [];
    main.showForm = false;

    this.getItems = function(){
    $http.get(serverUrl+"/items").success(function(data){
        main.items = data;
    }

    this.openForm = function(){
        main.showForm = true;
    }
}]);

As shown, both the button "Add New" and the icon in the table call the same function, and the value of showForm does change to true in both cases, but the icon does not open the form, as the HTML does not refresh it because it's not in it's tag (my assumption).

Further down the road, once I get the icon to open the form, I also want to insert the details form the same task from the table into the form, so it can be edited. But for now I just want to open the form.

Can anyone tell me what I'm missing, or point me in a direction to get this to work?

Answer 1

The issue occurs due to two instances of the same controller.

You create the first controller:

<div ng-controller="MainController as main">

Then the second one:

<table ng-controller="MainController as main">

Their scopes are not shared. So when one of them gets updated the second stays the same.

IMO, there is no need for two instances here. But if you really want this approach than you will need to either:

• create some base controller with items. then both controllers will inherit this collection and all changes will be updated

• put collection to factory.