Implement fullpage.js into angular.js

Question

I'm a bit new in angular.js and I wonder how to proper implement fullpage.js into angular.js. I tried to add fullpage as example ...

this code direct into controller i wanted to use for fullpage.js

$('#fullpage').fullpage({
    sectionsColor: ['#21f7ff', '#bdcc4b', '#fcae49'],
});

but the problem is when I put this code into controller i wont recongnize nothing else... ( other functions for click)

my exmaple of implementation in controller :

    'use strict';

    angular.module('APP')
        .controller('MainCtrl', function ($scope,Auth) {

         $('#fullpage').fullpage({
                sectionsColor: ['#21f7ff', '#bdcc4b', '#fcae49'],
         });

    $scope.moveUp = function(){
       $.fn.fullpage.moveSectionUp();
    };

   $scope.moveDown = function(){
      $.fn.fullpage.moveSectionDown();
   };

    });

view :

<div id="fullpage">
    <div class="section">

       <button class="button" ng-click="moveDown()">Down</button>
    </div>
    <div class="section">
       <button class="button" ng-click="moveUp()"> Up </button>
    </div>
</div>

I'm using angular-fullastack-generator for project start so this is a partial view.

My general question is how to proper implement fullpage.js into angular.js ?

Answer 1

Update Nov 2018:

Now you can make use of the official fullPage.js wrapper for Angular.

---

If you take a look at fullPage.js FAQs you will find this:

My javascript/jQuery events don't work anymore when using fullPage.js

Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, then you will to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

Which means you would need to use delegation for your events (such as click) or add them in the afterRender callback.