Well I didn't figure out why $locationProvider wasn't working, but I did get this working with AngularUI. There is a good tutorial here:
http://www.ng-newsletter.com/posts/angular-ui-router.html
For those who might have had this issue, the relevant changes were the following
main.html
<ul >
<li ng-repeat="factor in factors">
<span class="result-list-name">
<a ui-sref="factorDetails({FactorID: {{factor.FactorID}}})">
{{factor.FactorName}}
</a>
</span>
</li>
</ul>
main.js
var app = angular.module('mainApp',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.when('', '/');
$stateProvider
.state('main', {
url: '',
templateUrl: 'partials/main.html',
controller: 'totalListCtrl'
})
.state('factorDetails', {
url: 'factorDetails/:FactorID',
templateUrl: 'partials/details.html',
controller: 'detailsCtrl'
})
});
app.controller('totalListCtrl', function($scope, $http){
$http({method: 'get', url: '/api/factorsMainPage'})
.success(function(data, status, headers, config){
$scope.factors = data;
$scope.factorCount = Object.keys(data).length;
})
.error(function(data, status, headers, config){
$scope.factors = {dummyfactor:{"factorname":"there was an error loading data"}};
});
});
app.controller('detailsCtrl', function($scope, $stateParams, $http){
$http({method: 'get', url: ('/api/factorDetails/' + $stateParams.FactorID) })
.success(function(data, status, headers, config){
$scope.factor = data.factor1;
})
.error(function(data, status, headers, config){
$scope.factor = {dummyfactor:{"factorname":"there was an error loading data"}};
});
$scope.displayID = $stateParams.FactorID;
});