AngularJS - passing selected item data to an edit form
<p>I'm doing an add/edit form in angularJS.
I have a template to display the list of items and another one which contains a form. If I want to add an item then it works but I'm having issues with updating items.
This are the routes I declared, using one controller to handle everything about categories.</p>

<pre><code>$routeProvider.when('/category', {templateUrl:'templates/category.html', controller: 'categoryCtrl'});
$routeProvider.when('/category/:categoryId?', {templateUrl:'templates/editcategory.html', controller:'categoryCtrl'});
</code></pre>

<p>In my category.html template I have a button to add(which redirects to the edit template).</p>

<pre><code>&lt;button class="btn btn-primary" ng-click="createCategory()"&gt;Add Category&lt;/button&gt;
</code></pre>

<p>A button to edit: one button for every item.</p>

<pre><code>&lt;button class="btn btn-warning" ng-click="editCategory(category)"&gt;Edit&lt;/button&gt;
</code></pre>

<p>This is the editCategory.html template used to add/edit.</p>

<pre><code>&lt;div class="container"&gt;
&lt;form class="form-horizontal" id="categoryForm" name="categoryForm" ng-controller="categoryCtrl" &gt;
    &lt;div class="form-group"&gt;
        &lt;label for="name" class="col-sm-2 control-label"&gt;Name&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
            &lt;input type="text" name="name" ng-model="category.name" class="form-control" required&gt;&lt;/input&gt;
            &lt;span ng-show="form.name.$dirty &amp;&amp; form.name.$error.required"&gt;Category name is required&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;div class="col-sm-offset-2 col-sm-10"&gt;
            &lt;button type="submit" value="submit" class="btn btn-primary"  ng-click="addCategory(category)" 
            ng-disabled="categoryForm.$invalid"&gt;Create Category&lt;/button&gt;
            &lt;button type="btn" value="cancel" class="btn btn-danger" ng-click="cancelBtn()"&gt;Cancel&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p>And my categoryCtrl :</p>

<pre><code>myApp.controller('categoryCtrl', function($scope, $http, $location) {
    $scope.title ="Categories";
    $scope.categories = [];


    $scope.addCategory = function(category){
        $http.post('http://localhost/myappi/API/index.php/Api/categories',category).
                success(function(data) {
                    $scope.categories.push(data);
                })
                .error(function(err) {
                    console.log(err);
                })
                $location.path('/category');

    };
    $scope.editCategory = function(categoryData)
    {
        var id = categoryData.id;
        $scope.category = {};
        $scope.category = categoryData;
        console.log('scope data is ', $scope.category);
        $location.path('/category/'+id);
    };

    //go to the form to add a new category
    $scope.createCategory = function() {
        $location.path('/category/'+'new');
    };
});
</code></pre>

<p>I thought that setting $scope.category = category would also populate the form fields with the value.
Also is it a good that I used same route and template for both add/edit ?</p>