Using the same controller for two identical divs with different data and using xeditable for second div

Question

So I'm trying to duplicate the section div (so I can have multiple sections with multiple articles). I tried using the same controller for both divs as shown below. So I'm able to add the section by appending it to main but I can't edit the second div. Is there any way around this?

I am not using bootstrap and i'm using xeditable.

HTML:

    <div id="main" ng-app="main">
       <div class = "section" ng-controller="newsController">
          <h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
          <div class = "article" ng-repeat="article in sections.articles">
             <h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
             <p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
             <p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
             <p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
          </div>
          <div class = "section" ng-controller="newsController">
          </div>
   </div>

JS:

newsletter.controller('newsController',function($scope){

$scope.sections =  {
    section: "Faculty",
    articles: [
        {
            title: "In __ We Trust",
            link:'http://wee.com',
            publisher: "Me",
            orig_title:"",
            description: "Description Here"
        }
    ]
};
$scope.addItem = function(){
    $scope.sections.articles.push(this.sections.articles.temp);
    $scope.sections.articles.temp={};
};
)};

   var newSection = '//Pretend all the tags and the attributes as above are placed here'
   $("#add-section").click(function(){
      var $section = $('#main').append(newSection);
});

Apologies for formatting. I'm still new to this. Thanks!

Edit: I'm also trying to make this dynamic so the user could edit the texts like the title and the publisher, etc. How would I make the added section also editable?

Answer 1

Try it this way, instead of appending it uses angulars natural way of repeating divs aka ng-repeat:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.sections = {
            section: "Faculty",
            articles: [{
                title: "In __ We Trust",
                link: 'http://wee.com',
                publisher: "Me",
                orig_title: "",
                description: "Description Here"
            }]
        };
        $scope.addItem = function() {
            $scope.sections.articles.push(this.sections.articles.temp);
            $scope.sections.articles.temp = {};
        };
        var newSection = '//Pretend all the tags and the attributes as above are placed here'
        $("#add-section").click(function() {
            var $section = $('#main').append(newSection);
        });
    });
</script>
<div id="main" ng-app="myApp" ng-controller="myCtrl">
    <div class="section" ng-repeat="i in ['0','1']">
         <h2 id="section" editable-text="sections.section">{{sections.section}}</h2>

        <div class="article" ng-repeat="article in sections.articles">
             <h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>

            <p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
            <p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
            <p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
        </div>
        <div class="section" ng-controller="myCtrl"></div>
    </div>

Answer 2

I Got the answer! So I applied the app to the html document and the controller to the body as opposed to the main div and made an array of sections as opposed to a singular section. I did a ng-repeat for the section div. By doing so, I added a "addsection" function where I create a section to be added to the array and the section has to have the same properties as the other ones including an empty array of articles.

HTML:

<body ng-controller="newsController">
   <ul id="convenient-buttons">
       <li id="add-section"><a href=# id="add-section" ng-click="addSection()">Add Section</a></li>
       <li><a href=# id="copy" onclick="selectText('main')">Select All</a></li>
            <li><a href=# id="export" onclick="selectText('json')" ng-mouseenter="showJson=true" ng-mouseleave="showJson=false" >Send to Server</a></li>
   </ul>
   <div id="main">
       <div class = "section" ng-repeat="section in news.sections" >
          <h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
          <div class = "article" ng-repeat="article in sections.articles">
             <h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
             <p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
             <p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
             <p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
          </div>
   </div>
</body>

JS:

 $scope.news =  {
    sections: [
        {
            title: "Faculty",
            articles: [
                {
                    title: "In Memoriam: Eli Pearce",
                    link:'http://engineering.nyu.edu/news/2015/05/29/memoriam-eli-pearce',
                    publisher: "NYU Newsroom",
                    orig_title:"   ",
                    description: "When <strong>Professor Eli Pearce</strong> passed away on May 19, 2015, a slice of Poly history passed along with him. Pearce had been affiliated with the school, then known as the Polytechnic Institute of Brooklyn, since the mid-1950s, when he conducted his doctoral studies in chemistry here. As a student, he learned with such luminaries as Herman Frances Mark, who is often called the Father of Polymer Science, and Charles Overberger, another influential chemist who helped establish the study of polymers as a major sub-discipline."
                }
            ]
        }
    ]
};
$scope.addSection = function(){
    $scope.news.sections.temp={
        title: "Section Title",
        articles:[
        //  {
        //      title:"Article Title",
        //      link:"Link",
        //      publisher: "Publisher",
        //      orig_title: "Original Title",
        //      description: "Description"
        //  }
        ]
    };
    $scope.news.sections.push(this.news.sections.temp);
};