DOM Horizontal Scrolling using zynga scroller

Let's me start by explaining what I wanted to achieve. I am working a mobile project (using Ionic, AngularJS and Cordova). I need a page (View) that will list grouped items. All items of the same group needs to stay on the same row. Hence, the rows are most likely to span beyond the screen width, but that is iff the use can scroll each group in a horizontal (x) direction.

While, I was searching for a workable solution I saw Zynga Scroller. His Paging X-Axis looks so close but not exactly what I was looking for. The Paging X-Axis uses DOM id which makes it difficult to scroll each group independent of the other.

I have tried modifying the scripts (Paging X-Axis) to achieve the above stated objective without success.

Portion of code (just to allow codepen link):

var rect = container.getBoundingClientRect();

scroller.setPosition(rect.left + container.clientLeft, rect.top + container.clientTop);
scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight);

I created this Pen to show what I have done. Notice that scrolling on a particular group scrolls all groups (that is not what I want).

Secondly, the scrolling never run at all when I plug it into my Ionic Project.

    /**  Original definitions **/
    //  var container = document.getElementById("container");          
    //  var content = document.getElementById("content"); 

    // I need mutiple containers with indepentent content scrollers,  indendent containers with contents and cell
    var containers = document.getElementsByClassName("scroller-container");
    var contents = document.getElementsByClassName("scroller-content");

    // Did this just to reproduce dom-paging-x.html demo
    var container = containers[0];
    var content = contents[0];

    // Initialize Scroller
    var scroller = new Scroller(AppFactory.render, {
        scrollingY: false,
        paging: true
    });


    // Setup Scroller

    var rect = container.getBoundingClientRect();

    scroller.setPosition(rect.left + container.clientLeft, rect.top + container.clientTop);
    scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight);

    /**  Original definitions **/
    //  var container = document.getElementById("container");          
    //  var content = document.getElementById("content"); 

    // I need mutiple containers with indepentent content scrollers,  indendent containers with contents and cell
    var containers = document.getElementsByClassName("scroller-container");
    var contents = document.getElementsByClassName("scroller-content");

    // Did this just to reproduce dom-paging-x.html demo, container and content required by some other scripts
    var container = containers[0];
    var content = contents[0];

    // Initialize Scroller
    var scroller = new Scroller(AppFactory.render, {
        scrollingY: false,
        paging: true
    });


    // Setup Scroller

    var rect = container.getBoundingClientRect();

    scroller.setPosition(rect.left + container.clientLeft, rect.top + container.clientTop);
    scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight);

I have penned down my the Ionic Version the above for your assistance. I believe there's something that I am not getting right.

Your help will be well appreciated.