Pass information to bootstrap modal from Angular.js controller

Question

Simplified problem

I have a store. For a product to be included in the store there needs to be a shelf for it. So, to add a new product to the store the workflow is:

1. Add a shelf
2. Add product to that shelf

(The workflow can not be changed)

Realization

The shelf is realized by a row in a table, which in turn is controlled by an Angular.js controller (each shelf is an object in an array). To add an product the user selects "create product" in a drop-down menu that is present on each row. This will show an bootstrap modal where I have from a controller added a tab for each product that is possible to add (since each product needs configuration :) ) , then when the user presses a "create" button in the modal a JavaScript method is called interfacing a REST interface to add the product (the UI is updated by a Socket.io event send from the server when the product has been added successfully.

Problem

The JavaScript method (CreateProduct) needs to now what row (R) was affected as well as what tab (T) was selected so that the "onclick" method for the button is CreateProduct(R, T); My current solution is pretty ugly imho, I have two global variables for R and T, then I use jQuery to capture show event and tab event from the modal, the link in the dropdown has a field "data-row-id" that is identifying the row

HTML (Jade) snippet from dropdown menu:

a(data-toggle="modal", href="#createProduct", data-row-id="{{row.RowID}}") Create Product

JavaScript:

var R = null;
$('#productModal').on('show.bs.modal', function(e) {
    R = $(e.relatedTarget).data('row-id');
});

var T = null;
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    T = e.target.text;
});

I hope there is a better solution to this, I probably am just thinking a bit upsidedown due to inexperience with Angular.js , perhaps there is a way to pass these through the model? Perhaps add these to the modal controller, but then, how to pass the row? My dream would be something like this on the button code

 button(type="button", class="btn btn-default", data-dismiss="modal", ng-click="storeCtrl.CreateProduct({{modalCtrl.shelf, modalCtrl.Product)") Create Product

Answer 1

I found a better way (at least I don't need to use jQuery) using ModalService

I created a CreateProductModalController having a variable selectedProduct, this is set on a ng-click event in the tab

ul(class="nav nav-pills", id="tabContent")
    li(ng-repeat="prod in products", ng-class="{active: $index == 0}", ng-click="activateTab(prod.name)")
        a(href="#{{prod.name}}", data-toggle="tab") {{prod.name}}

The ModalService is called with the rowID that was clicked.

The only problem I have now is that all must be in $scope, I want it to be more encapsulated