angular.js and d3.js - geometric example

I drew a Limaçon with d3.js (see jsfiddle). As you move the the point along the x-axis (I call this variable px the shape changes a bit.

I would like to copy an angular.js example (jsfiddle, changes div's RGB color with sliders); the slider tied with the px variable in my d3.js code.

How can my jsfiddle be modified to add this user interaction? Is it like onclick()?

I would like to move the slider around and change the variable 'px' in my script which moves a point horizontally. Then I have to recalculate the radii of a bunch of circles.

I know there's a little bit on here: D3 within an AngularJS app

You can check the working example here : http://jsfiddle.net/fRgtF/3/ Basically you need to do everything inside a controller against a scope: 

function Controller($scope){
    $scope.$watch("px",function(){
        d3.select('svg').remove();
        var limacon = d3.select(".limacon").append("svg");

x0 = 300;
y0 = 250;

r = 50;
px = $scope.px;

limacon.append("circle")
    .attr("cx", x0)
    .attr("cy", y0)
    .attr("r", r)
    .attr("stroke", "#FFCC66")
    .attr("stroke-width", 2)
    .attr("fill", "none");

for (var k = 0; k < 20; k++) {
    limacon.append("circle")
        .attr("cx", x0 + r * Math.cos(2 * Math.PI * 0.05 * k))
        .attr("cy", y0 + r * Math.sin(2 * Math.PI * 0.05 * k))
        .attr("r", r * Math.sqrt(Math.sin(2 * Math.PI * 0.05 * k) * Math.sin(2 * Math.PI * 0.05 * k) + (Math.cos(2 * Math.PI * 0.05 * k) - px / r) * (Math.cos(2 * Math.PI * 0.05 * k) - px / r)))
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1)
        .attr("fill", "none");
}

limacon.append("circle")
    .attr("cx", x0 + px)
    .attr("cy", y0)
    .attr("r", 1)
    .attr("stroke", "#66CC66")
    .attr("stroke-width", 2)
    .attr("fill", "#66CC66");
    });

}

Your slider is modifying the px value on the scope and that is the value we use. We watch the px value on the scope and redo our d3 work based on new px value.